Question

我需要一种在复选框没有NAME或ID的情况下自动在页面加载后自动选择页面上所有复选框的方法。有可能吗？

<input type="checkbox"> checkbox 1 <br/>
<input type="checkbox"> checkbox 2 <br/>
<input type="checkbox"> checkbox 3 <br/>

Answer 1

使用jQuery最简单的方法是：
iframes

Answer 2

您可以通过以下方式使用JavaScript：

window.onload = function () {
  var chks = document.querySelectorAll('[type="checkbox"]');
  for (var i = 0; i < chks.length; i++) {
    chks[i].checked = true;
  }
}

<input type="checkbox"> checkbox 1 <br/>
<input type="checkbox"> checkbox 2 <br/>
<input type="checkbox"> checkbox 3 <br/>

此外，RobG指出的更好的版本是：

document.querySelectorAll('[type="checkbox"]').forEach(input => input.checked = true)

<input type="checkbox"> checkbox 1 <br/>
<input type="checkbox"> checkbox 2 <br/>
<input type="checkbox"> checkbox 3 <br/>

这可以在jQuery中以更简单的方式完成：

$(function () {
  $('[type="checkbox"]').prop("checked", true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox"> checkbox 1 <br/>
<input type="checkbox"> checkbox 2 <br/>
<input type="checkbox"> checkbox 3 <br/>

Answer 3

window.onload = function(e) {
  var checkboxes = document.querySelectorAll("input[type='checkbox']");
  for(var i = 0; i < checkboxes.length; i++) {
  		if (!checkboxes[i].hasAttribute("name") || !checkboxes[i].hasAttribute("id")) {
      checkboxes[i].checked = true; 
      }
  }
}

<input type="checkbox"> checkbox 1 <br/>
<input type="checkbox"> checkbox 2 <br/>
<input type="checkbox"> checkbox 3 <br/>
<input id = "id1" name = "id1" type="checkbox"> checkbox 3 <br/>
<input id = "id2" type="checkbox"> checkbox 3 <br/>
<input name = "id2" type="checkbox"> checkbox 3 <br/>

Answer 4

使用本机javascript，您可以在加载页面时通过tagName获取所有复选框元素（以下代码用es6写成）：

 window.onload = function() {
      const allCheckbox = getAllCheckbox();
      // write your custom code 
    };
    /**
     * Get all the checkbox by tag name
     */
    function getAllCheckbox() {
      const allInput = document.getElementsByTagName('input');
      const allCheckbox = Array.from(allInput).filter(
        input => input.type === 'checkbox'
      ).map( checkbox => { 
          checkbox["checked"] = true;
          return checkbox;
      });
      return allCheckbox;
    }

ES6中仅提供“ Array.from”，如果您使用es5将HTMLCollection转换为Array，则可以使用其他技术

Answer 5

您是否真的希望在页面加载之前不选中这些复选框，然后将它们全部选中？还是您只想默认检查它们。如果是前者，那么Praveen的反应很好。如果只希望默认情况下选中复选框，则只需将“ checked”属性添加到输入标签即可。即

<input type="checkbox" checked> checkbox 1 <br>
<input type="checkbox" checked> checkbox 2 <br>
<input type="checkbox" checked> checkbox 3 <br>

有关示例，请参见https://www.w3schools.com/tags/att_input_type.asp。

页面加载后自动选择所有复选框

5 个答案: