我创建的某些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>
最佳答案
不确定“拉穿”是什么意思,但是可以通过以下方法取消选中全部复选框:
if (!$currentCheckbox.hasClass('checkall')) {
var $previousCheckAll = $currentCheckbox.prevAll('.checkall');
if ($previousCheckAll.length>0)
{
$previousCheckAll.first().prop('checked',false);
}
}
只需将代码插入行下方
$("#checked").empty();
您的JSbin。