Question

有没有办法一次取消选中所有框？

我有一个4x4的复选框表，我将所有ID设置为“cb”。我想要一个清除所有这些按钮的按钮，所以我尝试做了类似下面的事情：

document.getElementById("cb").checked="false"

但是在屏幕上，它们仍然会被检查。这可能吗？

Answer 1

ID是唯一的，因此具有相同ID的多个元素不会解决问题，它只会使您的标记无效。改为使用类：

var boxes = document.getElementsByClassName("cb");

for (i=0; boxes.length<i; i++) {
    boxes[i].checked = false;
}

Answer 2

查看此文章Javascript Check and Uncheck All Checkboxes

以下是代码：

脚本

<script language="JavaScript">

    function checkAll(field)
    {
    for (i = 0; i < field.length; i++)
        field[i].checked = true ;
    }

    function uncheckAll(field)
    {
    for (i = 0; i < field.length; i++)
        field[i].checked = false ;
    }

</script>

HTML

<form name="myform" action="checkboxes.asp" method="post">
<b>Your Favorite Scripts & Languages</b><br>
<input type="checkbox" name="list" value="1">Java<br>
<input type="checkbox" name="list" value="2">Javascript<br>
<input type="checkbox" name="list" value="3">Active Server Pages<br>
<input type="checkbox" name="list" value="4">HTML<br>
<input type="checkbox" name="list" value="5">SQL<br>

<input type="button" name="CheckAll" value="Check All"
onClick="checkAll(document.myform.list)">
<input type="button" name="UnCheckAll" value="Uncheck All"
onClick="uncheckAll(document.myform.list)">
<br>
</form>

最好的问候

Answer 3

您可以使用以下内容：

function toggle(state) {
    var cb = document.getElementsByName('cb');
    for (var i = cb.length; i--;) {
        cb[i].checked = typeof state != 'undefined' ? state : !cb[i].checked;
    }
}

用法：

toggle(false); // Uncheck all
toggle(true);  // Check all
toggle();      // Toggle all

在此示例中，您可以通过name属性选择复选框。您还可以使用班级名称，并使用document.getElementsByClassName或document.querySelectorAll方法选择输入。

演示：http://jsfiddle.net/kCmqL/1/

Answer 4

尝试

<script language="javascript">
function checkUnCheckAll(formname)
{
  var checkboxes = new Array(); 
  checkboxes = document[formname].getElementsByTagName('input');

  for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
      checkboxes[i].checked = false;
    }
  }
}
</script>

`More`

Answer 5

您也可以使用与以下所有控件相同的名称：

<input type="Checkbox" name="compare" id="compare" value="1" />
    <input type="Checkbox" name="compare" id="Checkbox1" value="5" />
    <input type="Checkbox" name="compare" id="Checkbox2" value="8" />
    <input type="Checkbox" name="compare" id="Checkbox3" value="10" />

<input type="button" value="select all" onclick="javascript:checkAll()"/>
<input type="button" value="unckeck all" onclick="javascript: unCheckAll()"/> 

<script type="text/javascript">
    function checkAll()
    {
        var c = document.getElementsByName("compare");
        for (var i = 0; i < c.length; i++) {
            c[i].checked = true;
        }

    }
    function unCheckAll() {
        var c = document.getElementsByName("compare");
        for (var i = 0; i < c.length; i++) {
            c[i].checked = false;
        }

    }
    </script>

Answer 6

虽然你已经有了答案，但我还是认为我也会发布以下内容作为选项。给出以下最小/示范性HTML标记：

<input type="checkbox" class="something" name="cb" />
<input type="checkbox" class="something" name="cb" checked />
<input type="checkbox" class="something" name="cb" />
<input type="checkbox" class="something" name="cb" />
<input type="checkbox" class="something" name="cb" checked />
<input type="checkbox" class="something" name="cb" checked />

以下JavaScript可用于检查，取消选中或切换选择器返回的所有checkboxes：

Object.prototype.check = function (newState) {
    switch (newState.toLowerCase()) {
        case 'toggle':
            for (var i = 0, len = this.length; i<len; i++){
                this[i].checked = !this[i].checked;
            }
            break;
        case 'check':
            for (var i = 0, len = this.length; i < len; i++) {
                this[i].checked = true;
            }
            break;
        case 'uncheck':
            for (var i = 0, len = this.length; i < len; i++) {
                this[i].checked = false;
            }
            break;
    }
    return this;
};

要切换全部，请致电（例如）：

document.getElementsByClassName('something').check('toggle');

要检查所有内容，请致电（例如）：

document.getElementsByClassName('something').check('check');

要取消选中全部，请致电（例如）：

document.getElementsByClassName('something').check('uncheck');

取消选中框 - Javascript

6 个答案:

`More`