Select All

[Murphy1976]

I really like these pretty checkbox/radio buttons. I am wondering if I were to have multiple checkboxes with the proper markup, what would an external button need to look for to toggle a Select All function?

For example: HTML

<div class="container">
     <div class="pretty p-curve p-smooth p-bigger">
          <input type="checkbox" name="updateFlags['${status.count}']" value="true">
          <div class="state p-success">
               <label>Checkbox A</label>
          </div>
     </div>

     <div class="pretty p-curve p-smooth p-bigger">
          <input type="checkbox" name="updateFlags['${status.count}']" value="true">
          <div class="state p-success">
               <label>Checkbox B</label>
          </div>
     </div>

     <div class="pretty p-curve p-smooth p-bigger">
          <input type="checkbox" name="updateFlags['${status.count}']" value="true">
          <div class="state p-success">
               <label>Checkbox C</label>
          </div>
     </div>

     <div class="pretty p-curve p-smooth p-bigger">
          <input type="checkbox" name="updateFlags['${status.count}']" value="true">
          <div class="state p-success">
               <label>Checkbox D</label>
          </div>
     </div>
</div>
<button type="button" id="selectAll">Select All</button>

JS:

$("#selectAll").on('click', function(){
     $(".container input[type='checkbox']").prop('checked', $(this).prop('checked'));
});

Clicking the button does nothing in this instance.

[hamed-ehtesham]

Hi @Murphy1976, you are using checked property of a button instead of a checkbox (your JS code implies that selectAll must be a checkbox not a button) this Codepen is what your code must change to