纯JavaScript 制作多选框逻辑实现

Posted 勇敢*牛牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了纯JavaScript 制作多选框逻辑实现相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <input type="checkbox" id="all"><br/>
        <input type="checkbox"><br/>
        <input type="checkbox"><br/>
        <input type="checkbox"><br/>
        <input type="checkbox"><br/>
        <input type="checkbox"><br/>
    </form>
    <script>
        var inputs;
        init()
        function init()
            inputs = [].concat.apply([],document.getElementsByTagName('input'))
            console.log(inputs);
            for(var i=0;i<inputs.length;i++)
                inputs[i].onclick = clickHandler
            
        
        function clickHandler()
            if(this.id == 'all')
                for(var i=0;i<inputs.slice(1).length;i++)
                    inputs[i+1].checked = inputs[0].checked;
                
                // inputs.slice.forEach(function(item)
                //     item.checked=this.checked;
                //     console.log('@@@',this);
                // ,this)
            else
                inputs[0].checked = inputs.slice(1).every(function(item)
                    return item.checked;
                )
            
        
    </script>
</body>
</html>

以上是关于纯JavaScript 制作多选框逻辑实现的主要内容,如果未能解决你的问题,请参考以下文章

网页制作中,做那种可多选的勾选框怎么做?

python 制作GUI页面以及多选框

如何使用ajax制作多选复选框并且没有按钮提交

javascript中radio框触发事件弹出多个多选框,我修改多选框。点击另外一个radio时保存那些之前勾选的数据

JavaScript---网络编程(10)--DHTML技术演示-多选框

如何避免使用 Javascript 在多选框中进行 ctrl-click 的需要?