使用JQuery做一组复选框的功能。

之前做过复选框的功能，奈何笔记丢失，害的我又鼓捣了一番。。。还是博客园做笔记比较好。

假设现在有一个表格，每一行都有一个复选框按钮。在表头还有一个全选的复选框按钮。

①、当点击一个全选按钮时，下面的同组的复选框都被选中，再点击时取消全选，下面同组的所有复选框都取消。

②、当下面的所有选项都被选中时上面的全选框自动变为选中状态。当下面有一个选项的处于未选中状态时，上面的全选按钮自动变为未选中状态。

下面是表格的代码

<table border="1" cellpadding="10" cellspacing="0"><tr><td><input type="checkbox" name="test1" id="quanxuan" />全选</td><td>姓名</td><td>省份</td></tr><tr><td><input type="checkbox" name="test1" id="yi" class="item" /></td><td>张三</td><td>福建</td></tr><tr><td><input type="checkbox" name="test1" id="er" class="item" /></td><td>李四</td><td>广东</td></tr><tr><td><input type="checkbox" name="test1" id="san" class="item" /></td><td>王五</td><td>江苏</td></tr></table>

下面是代码形成的表格

一、实现点击全选按钮时，下面的选项全被选中，再次点击，取消全选时，下面的选项全部处于未选中状态。

<script type="text/javascript">$(function(){$("#quanxuan").click(function(){var isCheck = $(this).prop("checked");if(isCheck){alert("全选");var items = $(".item");for(var i = 0; i < items.length; i++){$(items[i]).attr("checked",true);}}else{alert("取消全选");        var items = $(".item");for(var i = 0; i < items.length; i++){$(items[i]).attr("checked",false);}}});})
</script>

在这个过程犯了一个低级错误。for循环里面的代码：

$(items[i]).attr("checked",false);//正确的

被我写成了

$(items[i].attr("checked",false));//错误的

搞了半天没发现错误。。。。。JavaScript真的很讨厌。写js代码总会有一股煞气堵在胸口的感觉。

二、现在添加功能：当下面的所有选项都被选中时上面的全选框自动变为选中状态。当下面有一个选项的处于未选中状态时，上面的全选按钮自动变为未选中状态。

下面是完整的js代码：

<script type="text/javascript">$(function(){$("#quanxuan").click(function(){var isCheck = $(this).prop("checked");if(isCheck){var items = $(".item");for(var i = 0; i < items.length; i++){$(items[i]).attr("checked",true);}}else{var items = $(".item");for(var i = 0; i < items.length; i++){$(items[i]).attr("checked",false);}}});$(".item").click(function(){//检查是不是所有的选项都被选中了，如果是，将全选按钮设置为选中状态。否则设为未选中状态。var items = $(".item");var flag = true;for(var i = 0; i < items.length; i++){var isChecked = $(items[i]).prop("checked");if(!isChecked){//将flag设为false，表示未全选。flag = false;}}if(flag){$("#quanxuan").attr("checked", true);}else{$("#quanxuan").attr("checked", false);}});})
</script>

转载于:https://www.cnblogs.com/GooPolaris/p/7920426.html

使用JQuery做一组复选框的功能。相关推荐

获取jQuery中的复选框值
如何在jQuery中获取复选框的值? #1楼尝试这个小解决方案: $("#some_id").attr("checked") ? 1 : 0; 要么 $(&q ...
jQuery扩展实现复选框批操作
jQuery提供了扩展接口jQuery.extend(Object)和jQuery.fn.extend(Object),前者是在jQuery对象上进行扩展(同jQuery的工具方法),而后者是在jQu ...
php ajax勾选框提交,jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例...
昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...
jquery实现HTML复选框变单选框
jquery实现HTML复选框变单选框 ps:本人亲测,阿里云2核4G5M的服务器性价比很高,新用户一块多一天,老用户三块多一天,最高可以买三年,感兴趣的可以戳一下:阿里云折扣服务器 <scri ...
html 判断复选框是否选中,jquery如何判断复选框是否选中？
jquery如何判断复选框是否选中?下面本篇文章给大家介绍一下jQuery判断复选框(checkbox)是否选中的几种方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jQuer ...
jQuery: 判断checkbox复选框是否被选中
本文介绍如何用jQuery获取checkbox复选框选中状态,或验证是否选中或取消选中复选框. jQuery: 判断checkbox复选框是否被选中这里我们使用jQuery .is()方法和匹配的c ...
php网页才用多个复选框列出,php – jQuery多个复选框页面过滤器
我一直在试图弄清楚如何正确地做到这一点,似乎无法让它发挥作用. 我想使用jQuery从本质上挑选我想要在页面上显示的内容.我看了,试图找到一些脚本,某种有效,但不是我想要的. 该页面将使用复选框作为& ...
JQuery 循环遍历 , 复选框全选全消反选checked属性
数组集合的遍历 $.each(list,function(index,item){ this. //this就表示item}); jquery对象的循环遍历 jquery对象.each(func ...
jQuery获取input复选框的值
var ipResolveValue =[]; //定义一个空数组 $("input[name='ipResolve']:checked").each(function(){ ...

使用JQuery做一组复选框的功能。

使用JQuery做一组复选框的功能。相关推荐

最新文章

热门文章