jQuery 全选/取消全选(反选)/单选操作用法

Question

用原生态的 JavaScript 操作页面上的一组 CheckBox 全选/取消全选，逻辑很简单，实现代码也不难写。但使用 jQuery 实现则非常简单，代码很简洁，文中还介绍了 prop() 函数的用法和注意事项，希望对你有所帮助。

先看看 HTML 代码，很简单的操作框

<div class="checkbox_test">
  <input type="checkbox" name="chk_list" id="chk_list_1" value="1" />1<br />
  <input type="checkbox" name="chk_list" id="chk_list_2" value="2" />2<br />
  <input type="checkbox" name="chk_list" id="chk_list_3" value="3" />3<br />
  <input type="checkbox" name="chk_list" id="chk_list_4" value="4" />4<br />
  <input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
</div>

引入jquery库

<script src="https://libs.wenjiangs.com/jquery/2.1.3/jquery.min.js"></script>

对于 CheckBox 的选择，实际上就是添加了一个属性 checked，不管后面有没有值，都是选中状态，在程序里面，如果 checked 值存在，就是 true，不存在就是 false。

一般的解决方法

于是就可以用下面的这个代码：

//全选/反选
$("#chk_all").on('click', function(){
  if($("#chk_all").attr("checked")){    //判断chk_all是否被选中
    $("input[name='chk_list']").attr("checked",false); //反选
  }else{
    $("input[name='chk_list']").attr("checked",true);//全选
  }
})

可是这段运行却是错误的，因为 $("#chk_all").attr("checked") 的值是 undefined，在我们编写的源代码里面并没有这个属性，就会报 undefined 错误。

prop函数

查看jQuery的api手册，发现了一个prop函数，.prop() 获取匹配的元素的属性值，这个方法是jquery1.6以后出来的，用来区别之前的 .attr() 方法。 最大的区别就是：布尔型的属性，1.6以后都是用 .prop() 方法就对了，这个布尔型的属性，再解释一下，是属性值只有 true / false 的属性。 还有种情况就是只添加属性名，不需要写属性值的就可以生效的也同样使用 .prop() 方法。比如：checked、disable 这样的，其实它们说到底还是属于布尔型的属性。

• 添加属性名称该属性就会生效应该使用prop();
• 是有true/false两个属性使用prop();
• 其他则使用attr();

正确的代码

上面的代码可以这样写：

//全选/反选
$("#chk_all").on('click', function(){
  if(!$("#chk_all").prop("checked")){    //判断chk_all是否被选中
    $("input[name='chk_list']").prop("checked",false); //反选
  }else{
    $("input[name='chk_list']").prop("checked",true);//全选
  }
})

这样修改以后，就不会报错，并且可以运行的很好！