按javascript或控制台选择全部复选框

时间:2012-06-06 04:34:50

标签: javascript html javascript-events checkbox

我的网页上有100个复选框。出于测试目的,我想勾选所有这些框,但手动点击非常耗时。有没有办法让他们勾选?

也许是JavaScript或Chrome控制台窗口,什么?

9 个答案:

答案 0 :(得分:42)

最直接的方法是获取所有输入,只过滤掉复选框,然后设置选中的属性。

var allInputs = document.getElementsByTagName("input");
for (var i = 0, max = allInputs.length; i < max; i++){
    if (allInputs[i].type === 'checkbox')
        allInputs[i].checked = true;
}

如果您碰巧使用jQuery - 而且我不是说您应该开始只是勾选所有的测试复选框 - 您可以简单地执行

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

或Fabricio指出:

$(":checkbox").prop("checked", true);

答案 1 :(得分:14)

纯JS方法,不要使用jQuery ..它只是愚蠢的东西如此微不足道。

[].forEach.call( document.querySelectorAll('input[type="checkbox"]'),function(el){
       el.checked=true;
     }
);​

<强> Live Demo

要在任何网页上使用它,您可以将其粘贴到地址栏

javascript:[].forEach.call(document.querySelectorAll('input[type="checkbox"]'),function(el){el.checked=true});

然后将其拖到书签上,你就有了一个书签。只要您需要在页面上使用它,只需单击它即可。

答案 2 :(得分:4)

使用jquery,简单就是那个

$('input:checkbox').each(function () {
   // alert(this);
   $(this).attr('checked', true);
  });

或者只是使用

$('input:checkbox').prop('checked', true);// use the property

OR

 $('input:checkbox').attr('checked', true); // by using the attribute

答案 3 :(得分:2)

如果你不想要jQuery,

querySelectorAll是你最好的选择!

var ele = document.querySelectorAll("input[type=checkbox]");
for(var i=0;i<ele.length;i++){
    ele[i].checked = true;
}
//Done.

答案 4 :(得分:2)

此JS代码将检查页面中的所有复选框:

var a = document.querySelectorAll('input[type="checkbox"]');
for (var i=0; i<a.length; i++)
    a[i].checked = true;​

Live demo

然后你需要做的就是用它创建一个书签,比如用this bookmarklet maker生成这个书签代码:

javascript:var a=document.querySelectorAll('input[type="checkbox"]');for(var i=0;i<a.length;i++)a[i].checked=true;%E2%80%8B

只需将此URI添加到书签工具栏中的书签,然后只需要检查页面中的所有复选框,您只需单击它即可。 =]

答案 5 :(得分:2)

多重检查全部&amp;取消选中所有框

您需要更改的是标签'name',以更改其图腾ON / OFF

<FORM>
    <input type="checkbox" name="item0[]" onclick="CheckAll(this)" />
    <input type="checkbox" name="item0[]" value="1" />
    <input type="checkbox" name="item0[]" value="2" />
    <input type="checkbox" name="item0[]" value="3" />
    <br>
    <input type="checkbox" name="item1[]" onclick="CheckAll(this)" />
    <input type="checkbox" name="item1[]" value="a" />
    <input type="checkbox" name="item1[]" value="b" />
    <input type="checkbox" name="item1[]" value="c" />
    <br>
    <input type="checkbox" name="item2" onclick="CheckAll(this)" />
    <input type="checkbox" name="item2" value="a1" />
    <input type="checkbox" name="item2" value="b2" />
    <input type="checkbox" name="item2" value="bc" />
</FORM>

<script>
    function CheckAll(x)
    {
        var allInputs = document.getElementsByName(x.name);
        for (var i = 0, max = allInputs.length; i < max; i++) 
        {
            if (allInputs[i].type == 'checkbox')
            if (x.checked == true)
                allInputs[i].checked = true;
            else
                allInputs[i].checked = false;
        }
    }
</script>

答案 6 :(得分:1)

我在Check all Checkboxes in Page via Developer Tools

上提供了这个问题的答案

简而言之,您可以通过以下方式从开发工具控制台(F12)执行此操作:

$$('input').map(i => i.checked = true)

$$('input[type="checkbox"').map(i => i.checked = true)

答案 7 :(得分:0)

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

单击按钮调用此方法并传递元素的名称(复选框 - 它们都应该是相同的名称)。

答案 8 :(得分:0)

只需将以下一种代码粘贴到浏览器控制台中即可:

勾选所有复选框:

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

取消选中所有复选框:

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