0
我在创建一些JavaScript时遇到了一些问题。当所有选中的项目都是未选中时，它需要从选中的全部框中删除选中的项目，同样当全选项被选中时，我不想通过其他项目只选中全部选中项。检查所有复选框
check all, item 1, item 2
删除项目1，并检查所有未检查，所有得到通过的项目。如果勾选全部勾选，则选中项目1和项目2，但不会拉动。
// all "check all" checkboxes will have the class "checkall"
// and the id to match the location, e.g. wales, etc
$(".checkall").on('change', function() {
// all normal checkboxes will have a class "chk_xxxxxx"
// where "xxxx" is the name of the location, e.g. "chk_wales"
// get the class name from the id of the "check all" box
var checkboxesClass = '.chk_' + $(this).attr("id");
// now get all boxes to check
var boxesToCheck = $(checkboxesClass);
// check all the boxes
boxesToCheck.prop('checked', this.checked);
});
// display what the user has chosen
$("input[type='checkbox']").change(function() {
$("#checked").empty();
$("input[type='checkbox']:checked").each(function() {
// see if it is a "check all" box
if ($(this).attr("class") === "checkall") {
// Display the id of the "check all" box
$("#checked").html($("#checked").html() + '<h3>' + $(this).attr("id").toUpperCase() + "</h3>");
} else {
// display the label text for all normal checkboxes
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
}
});
});
// With some more work you could make the Check All headings show when only one or two checkboxes were checked. It depends how you need it to work.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
<hr />
<input type="checkbox" id="west" class="checkall" value="3">
<label for="west">Check All</label>
<input type="checkbox" id="checkItem4" value="4" class="chk_west">
<label for="checkItem4">Item 1</label>
<input type="checkbox" id="checkItem5" value="4" class="chk_west">
<label for="checkItem5">Item 2</label>
<input type="checkbox" id="checkItem6" value="4" class="chk_west">
<label for="checkItem6">Item 3</label>
<hr />
<input type="checkbox" id="east" class="checkall" value="5">
<label for="east">Check All</label>
<input type="checkbox" id="checkItem7" value="6" class="chk_east">
<label for="checkItem7">Item 1</label>
<input type="checkbox" id="checkItem8" value="6" class="chk_east">
<label for="checkItem8">Item 2</label>
<input type="checkbox" id="checkItem9" value="6" class="chk_east">
<label for="checkItem9">Item 3</label>
<p>You have selected:</p>
<div id="checked">
</div>
</body>
</html>
你能解释清楚吗？ – void