jquery全选 选中所有checkbox，再次点击取消全选，可以反复点击，解决了点击一次后再次点击不能选中的问题

最新推荐文章于 2024-07-14 22:43:19 发布
最新推荐文章于 2024-07-14 22:43:19 发布
阅读量4k 收藏 1
点赞数 2
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32973061/article/details/81749906
版权

<!DOCTYPE html>
<html>
<head>
    <title>checkbox的多选</title>
</head>
<body>
     <table border="1" id="table11" width="350px" height="200px" align="center">
         <tr>
             <th>选项</th>
             <th>编号</th>
             <th>姓名</th>
             <th>性别</th>
             <th>薪资</th>
         </tr>
        <tr id="0">
            <td><input type="checkbox" id="Checkbox1" name="checkbox" value="0"></td>
            <td>1001</td>
            <td>李晓明</td>
            <td>男</td>
            <td>3650（元）</td>
        </tr>
         <tr id="0">
            <td><input type="checkbox" id="Checkbox1" name="checkbox" value="0"></td>
            <td>1001</td>
            <td>李晓明</td>
            <td>男</td>
            <td>3650（元）</td>
        </tr>
         <tr id="0">
            <td><input type="checkbox" id="Checkbox1" name="checkbox" value="0"></td>
            <td>1001</td>
            <td>李晓明</td>
            <td>男</td>
            <td>3650（元）</td>
        </tr>
         <tr id="0">
            <td><input type="checkbox" id="Checkbox1" name="checkbox" value="0"></td>
            <td>1001</td>
            <td>李晓明</td>
            <td>男</td>
            <td>3650（元）</td>
        </tr>
     </table>
     <table border="1" align="center">
         <tr>
             <td style="height: 20px;width:340px">
                 <span><input type="checkbox" name="" id="chkAll">全选</span>&nbsp;&nbsp;&nbsp;&nbsp;
                 <!--<span><input type="checkbox" name="" id="chkAll1">取消</span>-->
             </td>
         </tr>
     </table>
     <script type="text/javascript" src="jquery-3.3.1.js"></script>
     <script type="text/javascript">
         $(function(){
             $("table tr:nth-child(odd)").css("background-color","#eee");//奇数行变色
             //全选点击函数
             $("#chkAll").click(function(){
                 if(this.checked){//如果自己被选中
                     //$("input[type=checkbox]").prop("checked", "true");
                     $("input[name=checkbox]").prop("checked", "true");
                 }
                 else{
                     //$("input[name=checkbox]").removeAttr("checked");失效
                     //$("input[name=checkbox]").prop("checked", "false");失效
                     //$("input[value='全选']").on('click',function(){this.checked = false;}) 失效
                     $("input[name='checkbox']").each(function(){
                              this.checked=false;
                              });
                 }
             });
             
         });
     </script>
</body>
</html>

窥月
关注
专栏目录
jquery:实现全选和取消全选
进阶之旅
05-30 1万+
jquery:用jquery实现全选和取消全选 1、目前我遇到的最简单的一种方法，如果有更好的方法，大家可以分享一下 <input type="checkbox" id="all" />全选<br /> <input type="checkbox" name="sub" />image1.jpg<br /> <input type=...
jquery全选,取消全选
java开发指南博客 【转载】
07-27 135
最近项目又用到了这个全选和取消全选的操作. 以前总是自己写纯JS.现在既然知道怎么写了.那如何用JQ写得更简洁呢.这样也能学到新的东西.如果乎百度一下果然发现了好东东.感谢OSC的iuhoay. 代码如下: &lt;script type="text/javascript" src="/web/bzz_index/password/js/jquery-1.7.1.min.js"&gt;&lt...
点击全选，使所有复选框被选中
最新发布
weixin_58462329的博客
07-14 160
方法获取到全选复选框和其他复选框的元素。然后，给全选复选框添加了点击事件监听器。当全选复选框被点击时，通过一个循环将其他复选框的选中状态设置为与全选复选框相同。在上述代码中，首先通过。
Jquery全选和取消全选
麻辣隔壁4的博客
08-17 296
全选和取消去选 1 2 3 4 全选/取消全选 $("#chk_all").click(function(){ $("input[name='chk_list']").attr("checked",$(this).attr("checked")); }); jQuery.attr  获取/设置对象的属性值,如： $("input[name='chk_list'
使用jQuery1.10时复选框全选/取消全选的问题
a6265655的专栏
04-20 224
今天在使用jQuery1.10实现网页复选框全选和取消全选时遇到了如下问题， 使用jQuery的attr方法获取和设置复选框的"checked"属性，发现第一次全选/取消全选有效，之后就无效了，但查看html源文件，复选框属性确实已经被更新了，就是UI没有更新，问题代码如下： <script type="text/javascript"> $(functio...
Jquery的全选和取消
douyunqian668的博客
10-30 274
function checkAll()     {        var d=document.getElementById("leader");         if (d.checked==true){             $(":checkbox").each(function(){                 $(this).prop("checked",
jQuery实现点击行选中或取消CheckBox的方法
10-21
在本例中，我们将探讨如何使用jQuery实现点击行选中或取消表格（table）中的CheckBox。这个功能通常用于多选列表，允许用户通过点击表格行来选择或取消选择对应的复选框。 首先，我们需要理解jQuery中的核心概念。`...
jquery实现全选、反选、获得所有选中的checkbox
11-26
2、取消全选（全不选） $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr("checked"); }) 3、选中所有奇数 $("#btn3").click(function(){ $("input[name='checkbox']:odd").attr("check
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
10-29
"checkbox全选/取消全选以及checkbox遍历jQuery实现代码" CheckBox全选/取消全选是指在一个CheckBox组中...本例中我们使用jQuery实现了CheckBox全选/取消全选和CheckBox遍历的功能，提供了一个实际应用中的解决方案。
jquery操作checkbox实现全选和取消全选
10-26
在jQuery中，操作复选框（checkbox）进行全选和取消全选是常见的前端交互功能，主要用于批量选择或批量操作。下面将详细讲解如何利用jQuery实现这一功能。 首先，我们来理解复选框（checkbox）的基本操作。在HTML中...
运用JQuery实现全选，和取消的操作
aigo_2021的博客
05-10 757
运用JQuery实现全选，反选和取消的操作 代码展示： <!doctype html> <html lang="en"> <head> <title>Document</title> <script src="jquery-3.2.1.js"></script> <script> $(function(){ $("#selectAll").click(function(){
jQuery最简单的checkbox全选和取消全选
怕什么真理无穷
12-22 1026
function checkAll(){ $('input.order-check').each(function(i){ $(this).prop('checked',true); }); } function cancleAll(){ $('input.order-check').each(function(i){
jquery操作checkbox问题及解决方法：全选/取消 一次后再也无法全选
asdfede的博客
03-21 274
转自：http://roynet.net/jquery-cao-zuo-checkbox-gui-yi-wen-ti-quan-xuan-qu-xiao-yi-ci-hou-zai-ye-wu-fa-quan-xuan.html       html：   &lt;input type="checkbox" id="selectCheckBox" value=“全选/全取消”&g...
jquery操作checkbox反复选中,取消
意外金喜
03-19 7793
jquery操作checkbox选中或者取消时，使用attr和removAttr一次操作是可以的，但是重复操作就只有第一次有效， 后面就失效了，所以需要使用prop方法。 选中 $("input[type='checkbox']").prop("checked",true); 取消 $("input[type='checkbox']").prop("checked",false)
Jquery实现，点击选中，点击取消选中
猴子年华的专栏
03-20 2402
Jquery利用标签属性实现，点击选中，点击取消选中
JQuery实现全选/全不选，取消子checkbox时，全选checkbox取消对勾号
cristina_song的博客
08-19 2003
jquery全选/取消全选、取消子checkbox时，全选取消对勾号
JQuery点击全选/取消
qq_24023703的博客
01-06 340
$(function(){ $("#checkAll").click(function(){ $("input[type='checkbox']").prop("checked",$("#checkAll").is(':checked')); }) }) &lt;table border="1"&gt; &lt;tr&gt;&lt;td&gt;&
jQuery（删除，添加，批量删除，全选，全不选）案例
PremierAmour的博客
12-10 1919
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <center> <table cellpadding="5px" ce
jQuery实现点击全选和取消全选
java梦工厂
08-25 4015
jQuery实现点击全选和取消全选 有时候需要实现点击按钮全选，再点击取消全选，类似下图： 具体怎么实现呢？ 代码如下： [html] view plain copy print?('input[</span><span class="attribute">name</span><span>=</span><span class="attribute-value">"selectall"</span
JQuery实现全选取消全选checkbox的解决方案
JQuery 实现 checkbox 的全选取消全选 JQuery 是一个功能强大且流行的 JavaScript 库，它提供了许多实用的方法来操作 HTML 文档对象模型（DOM）。在本文中，我们将讨论如何使用 JQuery 实现 checkbox 的全选取消...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值