复选框选择使用querySelectorAll不工作

我有以下代码，主要来自How can I select all checkboxes from a form using pure JavaScript，它只是不工作。复选框选择使用querySelectorAll不工作

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

单击该按钮不执行任何操作。我必须在这里做一些非常错误的事情，但我无法挑选出来。

来源

2015-02-23 Joseph

尝试从改变'onclick'函数处理程序名'选择（）'一些不同的名称，而不是与已知标签冲突的......看到这个.. HTTP：//的jsfiddle。净/ t6b91d6m / – 2015-02-23 06:11:54

的功能select尝试任何其他名称，放心你的代码是好的。

来源

2015-02-23 06:21:11 Vaibhav

尝试......

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

来源

2015-02-23 06:16:25

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

});

更简单，更有效的方式

来源

2015-02-23 06:16:28

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

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

来源

2015-02-23 07:15:45

复选框选择使用querySelectorAll不工作

回答

相关问题