zoukankan      html  css  js  c++  java
  • 一个小例子,全选复选框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    .box {
        width: 200px;
        height: 100px;
        -webkit-transition: all 0.3s ease 0;
        background-color: #f4f4f4;
        border: solid 1px transparent;
    }
    .box:hover {
        border: solid 1px #ccc;
    }
    </style>
    </head>
    
    <body>
    <div class="box">
      <input name="test" type="checkbox" value=""  />
      1
      <input name="test" type="checkbox" value="" />
      2
      <input name="test" type="checkbox" value="" />
      3
      <input name="test" type="checkbox" value="" />
      4
      <input name="test" type="checkbox" value="" />
      5</div>
    <input type="button" value="all"  id="all" />
    <script>
    var but = document.getElementById("all");
    but.addEventListener("click",change);
    var isAll = false ;
    function change (){
        var box = document.querySelectorAll(".box input");
        var num = getCheckedCheckboxesNum("test");
        console.log(num);
        if(num == box.length){isAll=true;}
        if(isAll){
            for (var i=0;i<box.length;i++){
            
            box[i].checked = false ;
            isAll = false ;}
            
            }else {
                for (var i=0;i<box.length;i++){
            
            box[i].checked = true ;
            isAll = true; }
                }
        
            
        
        }
        
    function getCheckedCheckboxesNum(nameOfCheckBox)
    {
    var theNum=0;
    var theCheckboxInputs=document.getElementsByName(nameOfCheckBox);
    for (var i=0;i<theCheckboxInputs.length;i++)
    {
    if(theCheckboxInputs[i].checked) theNum++;
    }
    return theNum;
    }
    
    </script>
    </body>
    </html>
  • 相关阅读:
    define vs const vs enum
    解决Ubuntu 14.04 LTS 浏览网页速度慢的问题
    C语言两种产生矩阵的方法
    GTK 添加图标
    Unix Socket 端口 reuse
    Linux GTK Hello,World
    插件使用记录
    原型链和new
    each函数循环数据表示列举,列举循环的时候添加dom的方法
    字体圆润属性的使用-webkit-font-smoothing: antialiased
  • 原文地址:https://www.cnblogs.com/xiaotian747/p/3652543.html
Copyright © 2011-2022 走看看