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>
  • 相关阅读:
    个人对BFC的见解
    事件简单示例
    visual studio .net 2003
    C# Dictionary 的几种遍历方法
    C# 监听文件夹
    调用SAP dll 出现 试图加载格式不正确的程序
    SAP Connector 类概述
    Sapnco3.0 RFC Server Programs Receive Idocs
    微软工具下载地址
    Sapnco3.0 RFC Client Programs
  • 原文地址:https://www.cnblogs.com/xiaotian747/p/3652543.html
Copyright © 2011-2022 走看看