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>
  • 相关阅读:
    二分查找算法
    java多线程模拟停车位问题
    ECShop模板原理
    linux 常用命令 自己 积累
    ubuntu忘记root密码解决
    centos下一键安装lamp环境,快捷,方便
    腾讯php部分面试题答案
    PHP面试题集
    php笔试题
    流行的php面试题及答案
  • 原文地址:https://www.cnblogs.com/xiaotian747/p/3652543.html
Copyright © 2011-2022 走看看