pretty-checkbox
pretty-checkbox copied to clipboard
Select All
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.
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