最后我本页面的代码效果如下：
<!DOCTYPE html>
<html>
<head>
<title>复选框的表现形式</title>
</head>
<div>
<fieldset>
<legend>复选框全选与取消的应用：</legend>
<p>indeterminate</p>
<ul>
<li>
<input type="checkbox" id="checkall">
<label for="value1">全选/取消</label>
</li>
<li>
<ul id="checklist">
<li>
<input type="checkbox" name="arr[]" value="1">
<label for="value1">value1</label>
</li>
<li>
<input type="checkbox" name="arr[]" value="2">
<label for="value1">value2</label>
</li>
<li>
<input type="checkbox" name="arr[]" value="3">
<label for="value1">value3</label>
</li>
<li>
<input type="checkbox" name="arr[]" value="4">
<label for="value1">value4</label>
</li>
<li>
<input type="checkbox" name="arr[]" value="5">
<label for="value1">value5</label>
</li>
</ul>
</li>
</ul>
</fieldset>
<body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
/*全选按钮状态显示判断*/
$("#checklist").find("input[type='checkbox']").click(function(){
/*初始化选择为TURE*/
$("#checkall")[0].checked = true;
/*获取未选中的*/
var nocheckedList = new Array();
$("#checklist").find('input:not(:checked)').each(function() {
nocheckedList.push($(this).val());
});
/*状态显示*/
if (nocheckedList.length == $("#checklist").find('input').length) {
$("#checkall")[0].checked = false;
$("#checkall")[0].indeterminate = false;
} else if (nocheckedList.length) {
$("#checkall")[0].indeterminate = true;
} else {
$("#checkall")[0].indeterminate = false;
}
});
// 全选/取消
$("#checkall").click(function(){
// alert(this.checked);
if ($(this).is(':checked')) {
$("#checklist").find('input').each(function(){
$(this).prop("checked",true);
});
} else {
$("#checklist").find('input').each(function(){
$(this).removeAttr("checked",false);
$(this).prop("checked",false); // 根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
});
}
});
});
</script>
</body>
</html>
Thanks♪(･ω･)ﾉ 感谢你长得那么好看还来看我的博客！see you around ~