查看: 335|回复: 0

[文章教程] 一句话搞定JQ全选功能

[复制链接]
xuanxiao 发表于 2022-1-27 14:30:19 | 显示全部楼层 |阅读模式

  1. <input type="checkbox" id="checkAll">Check All
  2. <hr />
  3. <input type="checkbox" id="checkItem">Item 1
  4. <input type="checkbox" id="checkItem">Item 2
  5. <input type="checkbox" id="checkItem">Item3


  6. $("#checkAll").click(function() {
  7.                                            
  8.             $('input:checkbox').not(this).prop('checked', this.checked);
  9.                         })


  10. //***********开始执行**************

  11. /全选
  12. $("#CheckedAll").click(function () {
  13.     if(this.checked){
  14.      //$('[name=id]:checkbox').attr('checked', true);
  15.          $(this).closest('table').find("input[name='id']").prop('checked', $(this).prop("checked"));
  16.      }else {
  17.       $('[name=id]:checkbox').attr('checked', false);
  18.          //$(this).closest('table').find(".custom-checkbox input[type='checkbox']").prop('checked', $(this).prop("checked"));
  19.      }
  20.     //或者
  21.         console.log(this.checked)
  22.     //$('[name=id]:checkbox').attr('checked', this.checked);
  23. })

  24. //选框单选(如果有其中一个没选中就取消全选)
  25. $('[name=id]:checkbox').click(function () {
  26.    /* var flag = true;
  27.     $('[name=items]:checkbox').each(function () {
  28.         if (!this.checked) {
  29.             flag = false;
  30.         }
  31.     })
  32.     $('#CheckedAll').attr('checked', flag);*/
  33.    //等于下面
  34.     var $tmp=$('[name=id]:checkbox');
  35.     $('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length);
  36. })

  37. //提交
  38. $("#send").click(function () {
  39.     var str = "你选中的是:\r\n";
  40.     $('[name=items]:checkbox:checked').each(function () {
  41.         str += $(this).val() + '\r\n';
  42.     });
  43.     console.log(str);
  44. })
复制代码
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表

在线客服

售前咨询
售后咨询
服务热线
023-58418553
微信公众号