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

尝试使用函数select的任何其他名称，休息你的代码就可以了。

Answer 2

试试这个......

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

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

解决方案1：更改功能名称。
解决方案2：尝试onclick="window.select()"

的onclick="select()"内容

Answer 4

我建议你使用 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"                       
            });         
        }
    });

});

更简单，更有效的方式

使用querySelectorAll选中复选框不起作用

4 个答案: