• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

jQuery自定义插件全选框封装

武飞扬头像
嘴强程序员
帮助1

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8" />
  5.  
    <title></title>
  6.  
    <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
  7.  
    <script type="text/javascript">
  8.  
    $.fn.extend({
  9.  
    //传入复选框可传多个
  10.  
    "demo": function() {
  11.  
     
  12.  
    let chebox = [];
  13.  
     
  14.  
    var bo = $(this);
  15.  
     
  16.  
    for (var i = 0; i < arguments.length; i ) {
  17.  
     
  18.  
    arguments[i].each(function() {
  19.  
     
  20.  
    var inde = $(this);
  21.  
    chebox.unshift(inde);
  22.  
     
  23.  
     
  24.  
     
  25.  
    })
  26.  
     
  27.  
    }
  28.  
    $(this).click(function() {
  29.  
     
  30.  
    for (var i = 0; i < chebox.length; i ) {
  31.  
    chebox[i].prop("checked", $(this).prop("checked"))
  32.  
    }
  33.  
     
  34.  
    })
  35.  
    // 完善全选
  36.  
    for (var i = 0; i < chebox.length; i ) {
  37.  
     
  38.  
    chebox[i].click(function() {
  39.  
    var box = true;
  40.  
    for (var i = 0; i < chebox.length; i ) {
  41.  
    if (!chebox[i].prop("checked")) {
  42.  
    box = false;
  43.  
    }
  44.  
    }
  45.  
    bo.prop("checked", box);
  46.  
    })
  47.  
     
  48.  
     
  49.  
    }
  50.  
    }
  51.  
     
  52.  
     
  53.  
    })
  54.  
    $(function() {
  55.  
    // "#checkall" 全选框 后面可传多组复选框
  56.  
    $("#checkall").demo($("input:gt(1)"), $("input:eq(1)"))
  57.  
     
  58.  
    })
  59.  
    </script>
  60.  
    </head>
  61.  
    <body>
  62.  
     
  63.  
    <input type="checkbox" name="" id="checkall" value="全选" />全选
  64.  
    <input type="checkbox">1
  65.  
    <input type="checkbox">2
  66.  
    <input type="checkbox">3
  67.  
    <input type="checkbox">4
  68.  
    <input type="checkbox">5
  69.  
    <input id="che" type="checkbox">6
  70.  
    </body>
  71.  
    </html>
学新通

实现效果

学新通

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhheagf
系列文章
更多 icon
同类精品
更多 icon
继续加载