zoukankan      html  css  js  c++  java

  • 复选框的全选反选实现（即购物车的复选框实现）

    html页面

    1. <!doctype html>  
    2. <html lang="en">  
    3.     <head>  
    4.         <meta charset="UTF-8">  
    5.         <title>测试页面</title>  
    6.         <script src = "jquery.js"></script>  
    7.         <script src = "test.js"></script>  
    8.     </head>  
    9.     <body>  
    10.         <input type = "checkbox" id = "allCheck"/>全选</th><br/>  
    11.         <input type = "checkbox" name = "check"/></th>  
    12.         <input type = "checkbox" name = "check"/></th>  
    13.         <input type = "checkbox" name = "check"/></th>  
    14.         <input type = "checkbox" name = "check"/></th>  
    15.     </body>  
    16. </html>  

    js代码

    第一种方式 (有点不靠谱)

    1. //全选框  
    2. $("#allCheck").click(function(){  

    3. //console.log($(this).get(0).checked);
      console.log($(this).is(":checked"));
      //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false
      //console.log($(this).attr('checked'));
      if($(this).is(":checked")){    if($(this).attr("checked")){  

    4.         $("input[name='check']").attr("checked",true);  
    5.     }else{  
    6.         $("input[name='check']").attr("checked",false);  
    7.     }  
    8. })  
    9. //单选框  
    10. $("input[name='check']").change(function(){  
    11.     if($("input[name='check']").not("input:checked").size() <= 0){  
    12.         $("#allCheck").attr("checked",true);  
    13.     }else{  
    14.         $("#allCheck").attr("checked",false);  
    15.     }  
    16. })  

    第二种方式

    1. 全选框  
    2. $("#allCheck").click(function(){  
    3.     $("input[name='check']").prop("checked",this.checked);  
    4. })  
    5. //单选框  
    6. $("input[name='check']").change(function(){  
    7.     if($("input[name='check']").not("input:checked").size() <= 0){  
    8.         $("#allCheck").prop("checked",true);  
    9.     }else{  
    10.         $("#allCheck").prop("checked",false);  
    11.     }  
    12. })  

    第三种方式（原生js）

    1. //全选框  
    2. $("#allCheck").click(function(){  
    3.     var a = document.getElementById("allCheck");  
    4.     var b = document.getElementsByName("check");  
    5.     if(a.checked){  
    6.         for(var i = 0; i < b.length; i++){  
    7.             b[i].checked = true;  
    8.         }  
    9.     }else{  
    10.         for(var i = 0; i < b.length; i++){  
    11.             b[i].checked = false;  
    12.         }  
    13.     }  
    14. })  
    15. //单选框  
    16. $("input[name='check']").click(function(){  
    17.     var flag = true;  
    18.     var a = document.getElementById("allCheck");  
    19.     var b = document.getElementsByName("check");  
    20.     for(var i = 0; i < b.length; i++){  
    21.         if(!b[i].checked){  
    22.             flag = false;  
    23.             break;  
    24.         }  
    25.     }  
    26.     a.checked = flag;  
    27. }); 
  • 相关阅读:
    NOJ 1116 哈罗哈的大披萨 【淡蓝】 [状压dp+各种优化]
    Codeforces Round #278 (Div. 2) B. Candy Boxes [brute force+constructive algorithms]
    noj 2069 赵信的往事 [yy题 无限gcd]
    noj 2068 爱魔法的露露 [线性扫一遍]
    Codeforces Round #275 (Div. 2) B. Friends and Presents 二分+数学
    Word2007文档中怎么输入上标下标
    Linux下查找命令
    矩阵求逆
    LRC算法在人脸识别中应用
    java从txt文档读写数据
  • 原文地址：https://www.cnblogs.com/robbinluobo/p/8302075.html
Copyright © 2011-2022 走看看