function SelectUnselect(){
var boolCheckUncheck;
debugger;
if ($('.selectAll').prop('checked')) {
boolCheckUncheck = true;
}
else boolCheckUncheck = false;
$('.checkbox1:checkbox:visible').each(function () {
$(this).attr('checked', boolCheckUncheck);
});
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.6.0.slim.js"
integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY="
crossorigin="anonymous"></script>
</head>
<body>
<div>Select All</div>
<input type="checkbox" onchange="SelectUnselect()" class="selectAll" />
<br/>
<br/>
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
</body>
</html>我发现我的web应用程序有一些不寻常的行为。
实际上我有三个复选框
id ="1";-全选
id ="2">
id ="3">
id=1是Select All。如果用户签入，2和3就会被选中。uncheck也是一样，2和3都不被选中。id=1onChange事件
function SelectUnselect(){
var boolVal;
debugger;
if ($('.selectAll').prop('checked')) {
boolVal= true;
}
else boolVal= false;
$('.theClass:checkbox:visible').each(function () {
$(this).attr('checked', boolVal);
});
}
但是，假设我手动勾选id=2，然后单击SelectAll复选框，那么我的SelectUnselect()方法完全忽略它。尽管我在调试时可以看到它们。
基本上在手动单击任何复选框之后，当我单击SelectAll来选中或取消选中时，它会被完全忽略。
知道为什么会这样吗?
属性checked仅作为的初始值.
操作属性对复选框没有影响。;checked代替。这与文本输入的value属性的工作方式相同。
您可以使用下面的解决方案来解决。
HTML:
<input type="checkbox" class="selectAll" />
<input type="checkbox" id="checkbox1" class="other-checkboxes" />
<input type="checkbox" id="checkbox2" class="other-checkboxes"/>
Javascript:
$(".selectAll").on("change", function(){
if ($(this).prop("checked")){
// selectAll is checked
$(".other-checkboxes").prop("checked", true);
}
else{
// selectAll is not checked
$(".other-checkboxes").prop("checked", false);
}
});
$(".other-checkboxes").on("change", function(){
// checking if all the "other-checkboxes" checkboxes are checked
if ($('.other-checkboxes:checked').length == $('.other-checkboxes').length){
$(".selectAll").prop("checked", true);
}
else{
$(".selectAll").prop("checked", false);
}
});