pretty-checkbox icon indicating copy to clipboard operation
pretty-checkbox copied to clipboard

Select All

Open Murphy1976 opened this issue 6 years ago • 1 comments

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.

Murphy1976 avatar Sep 24 '18 15:09 Murphy1976

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

hamed-ehtesham avatar Sep 24 '18 16:09 hamed-ehtesham