html代码:
<div class="checkbox-custom" style="height:32px;line-height:32px;">
<input id="Appleid" name="Apple" class="checkboxstyle" type="checkbox" value="1">
<label for="Appleid">Apple</label>
</div>
<div class="checkbox-custom" style="height:32px;line-height:32px;">
<input id="Bananaid" name="Banana" class="checkboxstyle" type="checkbox" value="2">
<label for="Bananaid">Banana</label>
</div>
<div class="checkbox-custom" style="height:32px;line-height:32px;">
<input id="Pearid" name="Pear" class="checkboxstyle" type="checkbox" value="3">
<label for="Pearid">Pear</label>
</div>
<div class="checkbox-custom" style="height:32px;line-height:32px;">
<input id="Orangeid" name="Orange" class="checkboxstyle" type="checkbox" value="4">
<label for="Orangeid">Orange</label>
</div>
<div class="checkbox-custom" style="height:32px;line-height:32px;">
<input type="checkbox" name="SelectAll" class="checkboxstyle" id="SelectAllid">
<label for="SelectAllid">Select All</label>
</div>
js代码,需要通过class控制,所以每一个checkbox都需要有同一个class
$("#SelectAll").click(function () {
var checkAll = $(this).prop("checked");
$(".checkboxstyle").each(function () {
if (checkAll) {
$(this).prop("checked", true);
} else {
$(this).prop("checked", false);
}
});
});