如何使用纯JavaScript(没有JS框架)从表单中选择所有复选框?

use*_*065 15 javascript

我有问题,当所有复选框Id从某些const开始时,如何在表单上选择所有chceckbox的写函数.字符串,使用纯java脚本(没有jquery和其他框架)?我知道如何使用JQuery中的每个函数,但我不知道如何在纯JS.My表单中执行此操作.

    <form id="myId" name="myForm">
<input type="checkbox"  id="lang_1" value="de"/> DE
<input type="checkbox"  id="lang_2" value="us"/> US
<input type="checkbox"  id="lang_3" value="ru"/> RU
<input type="button" onclick="Select();"  value="Select all"/>
</form>
Run Code Online (Sandbox Code Playgroud)

Jam*_*ice 61

您可以使用getElementsByTagName获取所有input元素:

var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type == "checkbox") {
        inputs[i].checked = true; 
    }  
}
Run Code Online (Sandbox Code Playgroud)

这是一个例子.如果您只关心较新的浏览器,可以使用querySelectorAll:

var inputs = document.querySelectorAll("input[type='checkbox']");
for(var i = 0; i < inputs.length; i++) {
    inputs[i].checked = true;   
}
Run Code Online (Sandbox Code Playgroud)

这是一个例子.顺便说一句,你在问题中提到,使用jQuery时你可以使用它each.您不需要使用each,因为大多数jQuery方法都对匹配集中的所有元素进行操作,因此您只需一行即可:

$("input[type='checkbox']").prop("checked", true);
Run Code Online (Sandbox Code Playgroud)


gre*_*eth 4

在你的情况下:

for (i = 1; i<3; i++) {
  document.getElementById('lang_'+i).checked = true;
}
Run Code Online (Sandbox Code Playgroud)

  • 是的,或者根本没有检查属性,我只是回复了这个例子。詹姆斯的回答肯定更加彻底。 (2认同)