使用javascript取消选中页面加载上的所有复选框答案

【问题标题】：Uncheck all checkbox on pageload using javascript使用javascript取消选中页面加载上的所有复选框
【发布时间】：2015-07-01 05:24:42
【问题描述】：

我正在使用以下代码，但它不起作用。告诉我是否有任何建议。我希望在加载页面时取消选中所有复选框。我有以下代码，但它不起作用：

 window.onload = function abc() {
     document.getElementsByTagName('input')[0].focus();
 }

<tr>
    <td>
        <input type="checkbox" ID="cb1" value="29500" onclick="if(this.checked){ cbcheck(this) } else { cbuncheck(this)}" /> Laptop
    </td>
    <td>
        <a href="#" id="a1" onmouseover="showimage('a1','laptop1');"  >Show Image</a>
        <img src="Images/laptop.jpg" id="laptop1" alt="" style="display:none; width:150px; height:150px;" onmouseout="hideimage('a1','laptop1');" class="right"/>
    </td>
 </tr>
 <tr>
     <td>
          <input type="checkbox" ID="cb2" value="10500" onclick="if(this.checked){ cbcheck(this) } else { cbuncheck(this)}" /> Mobile
     </td>
     <td>
          <a href="#" id="a2" onmouseover="showimage('a2','mobile1');"  >Show Image</a>
          <img src="Images/mobile.jpg" id="mobile1" alt="" style="display:none; width:150px; height:150px;"   onmouseout="hideimage('a2','mobile1');" />
     </td>
</tr>

【问题讨论】：

你为什么不用 jQuery？
A.如果您不将它们设置为选中，则默认情况下它们将处于未选中状态。（您是否害怕 asp.net viewstate 或类似的东西？） B.Focus 无济于事。将checked 设置为假。 This 也应该有帮助。
@techie_28，也许是因为你并不总是需要使用 jQuery :)
使用您编写的代码，您的页面应该默认未选中所有复选框。
顺便问一下，你为什么要选中复选框？当页面最初加载时，默认情况下不要选中它们。

标签： javascript

【解决方案1】：

在页面加载事件中调用此函数

function UncheckAll(){ 
      var w = document.getElementsByTagName('input'); 
      for(var i = 0; i < w.length; i++){ 
        if(w[i].type=='checkbox'){ 
          w[i].checked = false; 
        }
      }
  }

【讨论】：

代码中的一点错误，它必须是 if(w[i].type == "checkbox")。根据您的代码，它将所有输入标签转换为复选框。当我加载页面时，文本框转换为复选框

【解决方案2】：

我没有看到您的代码试图取消选中这些框。你只是想专注于一个元素。

window.onload = function abc() {
    document.getElementsByTagName('input')[0].focus();
    var a = document.getElementById('form_name').getElementsByTagName('input');
    for (var i=0;i<a.length;i++) {
        if (a[i].type == 'checkbox') a[i].checked = false;
    }
}

我还建议您尝试一下JQuery。上面的代码在 JQuery 中就像这样：

$(document).ready(function(){
    $('#formID input[type=checkbox]').attr('checked',false);
});

【讨论】：

【解决方案3】：

你应该试试

window.onload = function(){
   var checkboxes = document.getElementsByTagName("INPUT");

   for(var x=0; x<checkboxes.length; x++)
   {
      if(checkboxes[x].type == "checkbox")
      {
          checkboxes[x].checked = false;
      }
   }

}

如果你会用jQuery，你可以试试

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

【讨论】：

【解决方案4】：

展示新技术的新答案。 Vanilla JS 现在是 2015 年：

var list = document.querySelectorAll('input[type=checkbox]');
for (var item of list) {
    item.checked = false;
}

紧凑的单行变体：

for(var i of document.querySelectorAll('[type=checkbox]')) { i.checked = false; }

这直接来自NodeList MDN documentation 示例。 querySelectorAll 提供的列表是 NodeList，for...of 循环是用于迭代属性值的新语句，是 2015 ECMAScript 6 标准的一部分——请参阅 here 了解浏览器兼容性。

【讨论】：