jQuery 复选框全选和清空

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);
		}
	});
});

猜你喜欢

转载自blog.csdn.net/qq_24470501/article/details/85328581