一,导入jQuery.js
<script src="jquery-3.5.1.js"></script>
二,html布局的实现
<h1>全选<input type="checkbox" id="all"></h1>
<ul id="ul">
<li>
<input type="checkbox" value="11" class="checkone">
<span>商品名1</span>
</li>
<li>
<input type="checkbox" value="22" class="checkone">
<span>商品名2</span>
</li>
</ul>
<script>
var checkedVal=[];
$("#all").click(function(){
var val=$(this).prop("checked");
console.log("111",val);
$("#ul :checkbox").each(function(i,v){
$(v).prop("checked",val);
if (val==true) {
checkedVal.push($(v).val())
console.log("asd",$(v).val());
}else{
checkedVal=[];
}
})
})
$(".checkone").click(function(){
var val=$(this).prop("checked");
console.log(val);
var value=$(this).val();
console.log(value);
var index=checkedVal.findIndex(function(v){
return v===value;
})
if (val==true) {
checkedVal.push($(this).val())
}else{
checkedVal.splice(index,1)
}
if (checkedVal.length==$("#ul :checkbox").length) {
$("#all").prop("checked",true)
}else{
$("#all").prop("checked",false);
}
})
</script>