jQuery 複選框全選和清空
阿新 • • 發佈:2019-01-02
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);
}
});
});