通過 Javascript 或控制台全選復選框

Question

我的網頁上有 100 個復選框。 出於測試目的，我想勾選所有這些框，但手動單擊非常耗時。 有沒有辦法讓他們打勾？

也許是 JavaScript 或 Chrome 控制台窗口，什么的？

Answer 1

最直接的方法是獲取所有輸入，僅過濾復選框，然后設置 checked 屬性。

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);

或者正如法布里西奧指出的那樣：

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

Answer 2

純 JS 方法，不要使用 jQuery .. 對於如此微不足道的事情來說這只是愚蠢的。

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

現場演示

要在任何網頁上使用它，您可以將其粘貼到地址欄中

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

然后把它拖到你的書簽上，你就有了一個書簽。 只要您需要在頁面上使用它，只需單擊它。

Answer 3

如果您不想要 jQuery， querySelectorAll是您的最佳選擇！

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

Answer 4

通過使用jquery ，就這么簡單

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

或者干脆使用

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

要么

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

Answer 5

此 JS 代碼將檢查您頁面中的所有復選框：

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

現場演示

然后你所要做的就是用它創建一個書簽，比如說，使用這個 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 添加到書簽工具欄中的書簽，然后您只需在需要檢查頁面中的所有復選框時單擊它即可。 =]

Answer 6

多個選中所有和取消選中所有框

所有你需要改變的是標簽“名稱”來改變它的圖靈開/關

<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>

Answer 7

我在 Check all Checkboxes in Page via Developer Tools提供了這個問題的答案

簡而言之，您可以通過以下方式從開發工具控制台 (F12) 執行此操作：

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

要么

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

Answer 8

由於chrome 30+，也可以單擊第一個結果，然后按住Shift鍵並單擊最后一個結果。

在最新版的chrome中，他們將復選框輸入類型更改為自定義標簽cr-checkbox，因此不再輸入復選框類型。

Answer 9

只需將這些單行之一粘貼到您的瀏覽器控制台：

勾選所有復選框：

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

取消所有復選框：

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

Answer 10

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

單擊按鈕時調用此方法並傳遞元素的名稱（復選框 - 它們都應具有相同的名稱）。