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>

  • 相关阅读:
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    win10右键新建markdown文件
    force down pool_member
    自控力差,你可能忽略了一种更底层的能力
    多线程的通信问题
    多线程的安全问题
    Java实现多线程的两种方式
    为什么你成不了数据分析高手?可能是缺少这个思维
    jstack && jmap
    对ElasticSearch主副分片的理解
  • 原文地址:https://www.cnblogs.com/wuxiang/p/2568571.html
Copyright © 2011-2022 走看看