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

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

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

先看看 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() 方法。比如:checkeddisable 这样的,其实它们说到底还是属于布尔型的属性。

  • 添加属性名称该属性就会生效应该使用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);//全选

}

})

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

以上是 jQuery 全选/取消全选(反选)/单选操作用法 的全部内容, 来源链接: utcz.com/p/231774.html

回到顶部