使用querySelectorAll进行的复选框选择不起作用

Checkbox select using querySelectorAll is not working

本文关键字：复选框 选择 不起作用 querySelectorAll 使用      更新时间：2024-04-17

我有以下代码，主要来自如何使用纯JavaScript从表单中选择所有复选框，但它不起作用。

Test.html

<html>
    <head>
    <script>
    function select(){
        var inputs = document.querySelectorAll("input[type='checkbox']");
        for(var i = 0; i < inputs.length; i++) {
            inputs[i].checked = true;   
        }
    }
    </script>
    </head>
    <body>
        <form id="myId" name="myForm">
        <input type="checkbox" value="1"/> 1
        <input type="checkbox" value="2"/> 2
        <input type="checkbox" value="3"/> 3
        <input type="button" onclick="select()"  value="Select all"/>
        </form>
    </body>
</html>

点击按钮不会有任何作用。我一定是做错了什么，但我就是挑不出来。

试试这个。。。

<html>
    <head>
    <script>
    function test(){
        var inputs = document.querySelectorAll("input[type='checkbox']");
        for(var i = 0; i < inputs.length; i++) {
            inputs[i].checked = true;   
        }
    }
    </script>
    </head>
    <body>
        <form id="myId" name="myForm">
        <input type="checkbox" value="1"/> 1
        <input type="checkbox" value="2"/> 2
        <input type="checkbox" value="3"/> 3
        <input type="button" onclick="test()"  value="Select all"/>
        </form>
    </body>
</html>

尝试函数select的任何其他名称，其余代码都可以。

select是在HTMLInputElement上定义的一个本地方法，用于聚焦选定的输入元素
选择

解决方案1：更改函数的名称
解决方案2：尝试onclick="window.select()"而不是onclick="select()"

我建议您使用Jquery并这样做：

实时演示

HTML

<ul class="chk-container">
<li><button id="selecctall">select all</button>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item1"> This is Item 1</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item2"> This is Item 2</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item3"> This is Item 3</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item4"> This is Item 4</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item5"> This is Item 5</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item6"> This is Item 6</li>
<li><input class="checkbox2" type="checkbox" name="check[]" value="item6"> Do not select this</li>
</ul>

Jquery

$(document).ready(function() {
    $('#selecctall').mouseup(function(event) {  //on click 
        if(document.activeElement.tagName ==='BUTTON') { // check select status
            $('.checkbox1').each(function() { //loop through each checkbox
                this.checked = true;  //select all checkboxes with class "checkbox1"               
            });
        }else{
            $('.checkbox1').each(function() { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox1"                       
            });         
        }
    });
});

更简单、更高效的方式

相关文章：