使用 querySelectorAll 的复选框 select 不工作

Question

我有以下代码，大部分来自 How can I select all checkboxes from a form using pure 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>

点击按钮没有任何反应。我一定是在这里做错了什么，但我就是挑不出来。

Answer 1

试试这个...

<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>

Answer 2

我建议你使用 Jquery 并且这样做：

Live Demo

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"                       
            });         
        }
    });

});

更简单高效的方式

Answer 3

尝试函数 select 的任何其他名称，休息你的代码没问题。

Answer 4

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

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

使用 querySelectorAll 的复选框 select 不工作

Checkbox select using querySelectorAll is not working

html

javascript

checkbox