实现复选框全选和全不选的切换

最新推荐文章于 2024-04-25 11:38:14 发布

木木木华

最新推荐文章于 2024-04-25 11:38:14 发布

阅读量2k

点赞数 1

分类专栏： javascript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/catascdd/article/details/128974028

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

今天，复看了一下JS的菜鸟教程，发现评论里面都是精华呀！！

看到函数这一节，发现就复选框的全选和全不选功能展开了讨论。我感觉挺有意思的，尝试实现了一下。

1. 全选、全不选，两个按钮，两个方法

首先，按照自己的思路，笨方法实现了一下，一个按钮对应着一个方法。代码如下所示：

<!DOCTYPE html>
<head>
    <title>全选、全不选实例</title>
</head>
<body>
    你喜欢什么水果？<br>
    <input type="checkbox" name="fruit" value="苹果">苹果
    <input type="checkbox" name="fruit" value="香蕉">香蕉
    <input type="checkbox" name="fruit" value="橘子">橘子
    <input type="checkbox" name="fruit" value="葡萄">葡萄
    <input type="checkbox" name="fruit" value="芒果">芒果
    <input type="checkbox" name="fruit" value="榴莲">榴莲 
    <br>
    <input type="button" value="全选" onclick="allSelect('fruit')">
    <input type="button" value="全不选" onclick="noneSelect('fruit')">

    <script>
        function allSelect(name){
            var checkboxs = document.getElementsByName(name);
            for(var i=0;i<checkboxs.length;i++){
                checkboxs[i].checked = true
            }
        }
        function noneSelect(name){
            var checkboxs = document.getElementsByName(name);
            for(var i=0;i<checkboxs.length;i++){
                checkboxs[i].checked = false
            }
        }
    </script>
</body>

很简单，代码也很容易理解，不多说。

2. 全选、全不选，同一个按钮，同一个方法（全选和全不选循环更替）

为了代码的简洁性，实现同一个按钮实现全选和全不选的两个功能。代码如下：

<!-- 利用一个按钮控制，意味着要将两个方法合二为一 -->
<input type="button" value="全选" onclick="handleSelect('fruit',this)">

<script>
    var checkedValue = false;
    function handleSelect(name,controlInput){
        var checkboxs = document.getElementsByName(name);
        controlInput.value == "全选"? checkedValue=true:checkedValue=false;
        for(var i=0;i<checkboxs.length;i++){
            checkboxs[i].checked = checkedValue
        }
        checkedValue==true?controlInput.value = "全不选":controlInput.value = "全选";
    }
</script>

这里面用到了两次三元运算符，handleSelect(‘fruit’,this)”传了两个参数，一个是复选框的name属性值，一个是控制按钮本身。

算法思路：

首先依据控制按钮的value值判断，是否全选，是的话循环将复选框checked设为true;
然后，将按钮的value值设为全不选。
起初，我传的值不是this，是value，我想着只要把value属性传过来就好啦，后续发现能传过来，但是后面想要修改的时候，就改不了。所以要传this，把指向对象的的传过来，就能修改属性了。

在评论中看到一个很强势的算法及另一个网友的改进算法，代码如下：

<!-- 强势 -->
<input type="button" value="全选" onclick="handlecheck()">
<!-- 上面的改进 -->
<input type="button" value="全选" onclick="allcheck(this)">

<script>
    // 无法判断当前的value-----很强势，点一下全选、全不选
    var checkAll = false;
    function handlecheck(){
        checkAll = !checkAll;
        let inputs = document.getElementsByName('fruit')
        for(var i =0;i<inputs.length;i++){inputs[i].checked = checkAll}
    }
    
	// 改进
    var checkAll = false;
    function allcheck(element){
        checkAll = !checkAll;
        element.value=checkAll?"全不选":"全选";
        let inputs = document.getElementsByName('fruit') 
        for( var index in inputs){
            inputs[index].checked = checkAll;
        }
    }
</script>

第一种算法有缺陷，没有判断，点一下全选，再点一下全不选，用户体验不好，不可取。

第二种算法，和我的实现效果是一样的，但算法思路不一样，是默认全不选，然后点击一下修改为全选，同时文字信息修改。

上面这三种算法，本质上其实有些像，基本就是全选和全不选循环，第一种和第三种的按钮value值会跟着修改，用户体验会好一点。

3. 全选、全不选，在表格中（更符合用户需求）

依据自己的项目经验，我感觉下面这种情况用的是最多的。

<!DOCTYPE html>
<html>
    <head>
        <title>全选全不选结合用户需求</title>
        <style>
            table{
                border-collapse:collapse;
            }

            table, td, th{
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th><input type="checkbox" id="fruitControl" onclick="allSelect(this, 'fruit')"></th>
                <th>你喜欢什么水果</th>
            </tr>
            <tr>
                <td><input type="checkbox" name="fruit" value="苹果" onclick="handleSelect(this, 'fruitControl')"></td>
                <td>苹果</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="fruit" value="香蕉" onclick="handleSelect(this, 'fruitControl')"></td>
                <td>香蕉</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="fruit" value="橘子" onclick="handleSelect(this, 'fruitControl')"></td>
                <td>橘子</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="fruit" value="葡萄" onclick="handleSelect(this, 'fruitControl')"></td>
                <td>葡萄</td>
            </tr>
        </table>

        <script>
            function allSelect(ele, name){
                // 全选框是什么状态（选中or没选中），底下的checkbox框就是什么状态
                var checkboxs = document.getElementsByName(name);
                for(var i=0;i<checkboxs.length;i++){
                    checkboxs[i].checked = ele.checked
                }
            }

            function handleSelect(ele, controlId){
                var allSelectControl = document.getElementById(controlId);
                // 当前框没有选中，全选框肯定没选中
                if(ele.checked == false){
                    allSelectControl.checked = false;
                } else {
                    // 当前框选中了，去看其它其它框，只要有一个没选中，全选框就不会选中
                    var checkboxs = document.getElementsByName(ele.name);
                    var allChecked = true;
                    for(var i=0;i<checkboxs.length;i++){
                        if( checkboxs[i].checked == false ){
                            allChecked = false;
                            break;             
                        }   
                    }
                    allSelectControl.checked = allChecked; 
                }
            }
        </script>
    </body>
</html>