使用JavaScript选择All按钮

SelectAll button using JavaScript

本文关键字：按钮 All 选择 JavaScript 使用      更新时间：2023-09-26

我有以下代码。我想在点击按钮时选中所有复选框。如何仅使用JavaScript来完成此操作？

<div id="blocked_list_add_website_help_text">
    <button type="button" id="blockSelectAll" class="secondary">Select All</button>
</div>
<input type="checkbox" value="box1" />Box1
<input type="checkbox" value="box2" />Box2
<input type="checkbox" value="box3" />Box3

Pure JS:

document.getElementById("blockSelectAll").onclick = function() {
    var inputs = document.getElementsByTagName("input");
    for(var i = 0; i < inputs.length; i++) {
        if(inputs[i].type == "checkbox") {
            inputs[i].checked = true;
        }
    }
}

工作小提琴

使用document.querySelectorAll:

document.getElementById("blockSelectAll").onclick = function(){
    var checkboxes = document.querySelectorAll('input[type=checkbox]');
    for(var i=0; i<checkboxes.length; i++){
        checkboxes[i].checked = true;
    }
};

是的，你可以试试这个

HTML

<button type="button" id="blockSelectAll" onclick="checkAll()" class="secondary">Select All</button>

JavaScript

function checkAll() {
     var checkboxes = document.getElementsByTagName('input');    
     for (var i = 0; i < checkboxes.length; i++) {
         if (checkboxes[i].type == 'checkbox') {
             checkboxes[i].setAttribute('checked', true) // Or inputs[i].checked = true;
         }
     }
 }

Fiddle演示

<script language="JavaScript">
function checker() {
     checkboxes = document.getElementsByTagName('input');
     for each(var checkbox in checkboxes)
          checkbox.checked = true;
}
</script>
<div id="blocked_list_add_website_help_text">
    <button type="button" id="blockSelectAll" class="secondary" onclick=checker() >Select All</button>
</div>
<input type="checkbox" value="box1" />Box1
<input type="checkbox" value="box2" />Box2
<input type="checkbox" value="box3" />Box3
相关文章：