zoukankan      html  css  js  c++  java
  • js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中。

    详解:

    有两种方式使<input type="checkbox" />中的复选框被选中。

    方法一:直接在HTML行间中添加checked属性。   eg:<input type="checkbox" checked />

    方法二:使用javascript使input对象的checked="true";  eg: document.getElementsByTagName('input')[0].checked='true';

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>全选</title>
    <script>
    window.onload = function(){
        var aInput = document.getElementsByTagName('input');
        var oInput = aInput[0];
        var a = 0;
        var b = 0;
        aInput[0].onclick = function(){
            for (var i = 0; i < aInput.length; i++) {
                if(aInput[0].checked == true){
                    aInput[i].checked = true;
                }else{
                    aInput[i].checked = false;
                }
            }
        };
        for (var i = 1; i < aInput.length; i++) {
            aInput[i].onclick = function(){
                a = 0;
                b = 0;
                for (var i = 1; i < aInput.length; i++) {
                    if (aInput[i].checked == false) {
                        a++;
                    }else {
                        b++;
                    }
                }
                if(a>0){
                    oInput.checked = false;
                }else if(b==aInput.length-1){
                    oInput.checked = true;
                };
            };
        }
    };
    </script>
    </head>
    <body>
    <p><input type="checkbox" name="" />全选</p>
    <input type="checkbox" name="" /><br />
    <input type="checkbox" name="" /><br />
    <input type="checkbox" name="" /><br />
    <input type="checkbox" name="" /><br />
    <input type="checkbox" name="" /><br />
    <input type="checkbox" name="" /><br />
    <input type="checkbox" name="" /><br />
    <input type="checkbox" name="" /><br />
    <input type="checkbox" name="" /><br />
    <input type="checkbox" name="" /><br />
    <input type="checkbox" name="" /><br />
    </body>
    </html>
  • 相关阅读:
    固定长度下随文字数量增加自动适配字体大小
    vue v-for 和 v-if 、v-else一起使用造成的bug
    火狐使用Ctrl新开窗口不生效
    js如何模拟multipart/form-data类型的请求
    centos安装nodejs
    cursor图标自定义
    解决 vs code 打开文件总是只有一个tab标签页,新打开的tab标签页会替换掉旧的tab标签页
    Devexpress Tab Control 文档
    Devexpress WPF教程
    Linq把一个DataTable根据一列去除重复数据
  • 原文地址:https://www.cnblogs.com/grayson/p/5986524.html
Copyright © 2011-2022 走看看