zoukankan      html  css  js  c++  java
  • jquery 全选 全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>jQuery 全选 全不选</title>
         <script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
         <script type="text/javascript">
             $(function () {
                 $("#chkAll").click(function () {
                     $("input[name='chk']").attr("checked", $(this).attr("checked"));   //注意
                 });

                 $("input[name='chk']").each(function () {
                     $(this).click(function () {
                         if ($("input[name='chk']:checked").length == $("input[name='chk']").length) {
                             $("#chkAll").attr("checked", true)     //当元素全部选择后,控制全部的checkbox也处于选定状态
                         } else {
                             $("#chkAll").attr("checked", false);    //只要有一个没有选择控制全选的checkbox是不会checked的
                         }
                     })

                 });
             });      
         </script>
     </head>
     <body>
      <input type="checkbox" id="checkbox1" name="chk" ><label for="checkbox1">aaaaaa</label><br>
      <input type="checkbox" id="checkbox2" name="chk" ><label for="checkbox2">bbbbbb</label><br>
      <input type="checkbox" id="checkbox3" name="chk" ><label for="checkbox3">cccccc</label><br>
      <input type="checkbox" id="checkbox4" name="chk" ><label for="checkbox4">dddddd</label><br>
      <input type="checkbox" id="checkbox5" name="chk" ><label for="checkbox5">eeeeee</label><br><br>
      <input type="checkbox" id="chkAll" name="chkAll" /><label for="chkAll">全选</label>
     </body>
    </html>

  • 相关阅读:
    vue-awesome-swiper-T 轮播图
    transition-T 手机端滑动验证
    VUE-T
    跨域配置-Access-Control-Allow-Origin
    HTML中CSS引入图片并铺满背景
    mysql_affected_rows()、mysql_fetch_row、mysql_fetch_assoc
    tp框架的四种路由方式
    sql注入
    禁用cookie,怎么获得session
    git解决冲突的方法
  • 原文地址:https://www.cnblogs.com/wuxiang/p/2568571.html
Copyright © 2011-2022 走看看