javascript選擇表格中的所有複選框

我想製作一個頁面，其中包含各個網頁的表格，每個網頁旁邊都有複選框。我希望用戶能夠選擇多個網站，然後使用Google欄搜索網站。我有一張桌子，每個單元格都有一個填有複選框的表單。每個單元格都有一個checkall按鈕，用於檢查該單元格中的所有選項。我想添加一個複選框來選擇頁面上的所有選項。（是的，我可以放棄這個選項，但我有點想知道如何訪問單元格中的所有框，以便我可以像我想要的那樣用谷歌搜索。）這裏基本上就是我所擁有的。它checkPage函數內，在這一點javascript選擇表格中的所有複選框

<html> 
<head> 
<script type="text/javascript"> 
    function checkAll(checkname, bx) { 
     for (i = 0; i < checkname.length; i++){ 
      checkname[i].checked = bx.checked? true:false; 
     } 
    } 
    function checkPage(bx){ 


     var bxs = document.getElementByTagName ("table").getElementsByTagName ("link"); 

     for(i = 0; i < bxs.length; i++){ 
      bxs[i].checked = bx.checked? true:false; 
     } 
    } 
</script> 


</head> 
<body> 
<input type="checkbox" name="pageCheck" value="yes" onClick="checkPage(this)"><b>Check Page</b> 
<table border="1" name ="table"> 

<tr> 
    <td name ="list00"> 
     <form name ="list00"> 
      <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list00.link, this)"><b>Check All</b><dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd> 
     </form> 
    </td> 
    <td><form name ="list01"> 
      <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list01.link, this)"><b>Check All</b><dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd>  
     </form></td> 
</tr> 
<tr> 
    <td><form name ="list10"> 
      <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list10.link, this)"><b>Check All</b><dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd> 
     </form></td> 
    <td><form name ="list11"> 
      <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list11.link, this)"><b>Check All</b><dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd> 
      <input type="checkbox" name="link" value="something.com">something.com<dd> 
     </form></td> 
</tr> 
</table> 

</body> 
</html>

來源

2011-08-30 Bastiat

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

有功能從您的複選框的onclick屬性調用檢查所有

<input type="checkbox" onclick="checkAll(this)">

編輯我誤解了你的問題，我發現你已經在你的代碼中嘗試過了。在getElement 小號 ByTagName必須是複數，你可能已經typo'd那裏，必須由指定的回答上面的

編輯標籤：傳遞主複選框作爲參數將允許切換檢查/取消選中vol7ron的建議，並已在此答案中進行了適當修改。

問題要求頁面上的所有複選框，這樣就足夠了。

但是，提供控制哪些元素來查找複選框可以通過多種方式實現，太多的細節可以實現，但例子可以是document.getElementById（id）.getElementsByTagName，如果所有要控制的複選框都是來自一個元素的分支節點。
否則，您可以遍歷另一個標記名稱檢索/自定義類名稱檢索，僅舉幾例。

來源

2011-08-30 23:57:51 Psyrus

這一個表示感謝。但爲了達到我的目的，我刪除了整個if語句並將其替換爲 cbs [i] .checked = bx.checked？真假; 使其成爲撥動開關 – Bastiat

此代碼僅適用於按鈕。如果該人取消選中該框，則不會取消選中所有複選框。 – vol7ron

@ vol7ron當我挑選他的時候，你的答案沒有起來。是的，這是一個直接的情況答案，如果你注意到我的迴應，我更換了代碼，使複選框切換。 – Bastiat

標籤名需要幫助的部分是啓動HTML標籤如<input位所以.getElementsByTagName ("link")應該.getElementsByTagName ("input")，如果你只希望name='link'然後if(bxs.name =="link") { ... change the checked }

來源

2011-08-30 23:57:17

如果OP真的後鏈接，然後按[文件.links]（http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7068919）集合將是比* getElementsByTagName *更好的選擇，因爲它只獲取鏈接，而不是A可能是錨點的元素。 – RobG

例子：http://jsfiddle.net/vol7ron/kMBcW/

function checkPage(bx){     
    for (var tbls=document.getElementsByTagName("table"), i=tbls.length; i--;) 
     for (var bxs=tbls[i].getElementsByTagName("input"), j=bxs.length; j--;) 
     if (bxs[j].type=="checkbox") 
      bxs[j].checked = bx.checked; 
}

來源

2011-08-31 00:02:42 vol7ron

您是否嘗試過的jQuery？它正在成爲DOM操作的JavaScript標準庫（也是使用了stackoverflow）。使用它你可以做$（'：checkbox'）。prop（'checked'，true）;檢查頁面上的每個複選框（但您可能只想在表格中檢查）。

無論如何，開始使用jQuery，它會讓你的生活更輕鬆快樂，並且會爲你節省很多時間。

來源

2011-08-31 00:03:53 grisevg

...或者即使你想翻轉所有複選框中的相應形式簡單：

function checkAll(bx){ 
    var form = bx.form; 
    var ischecked = bx.checked; 
    for (var i = 0; i < form.length; ++i) { 
     if (form[i].type == 'checkbox') { 
      form[i].checked = ischecked; 
     } 
    } 
}

...

<input type="checkbox" onclick="checkAll(this)">

來源

2015-07-20 18:42:39 Zrin

javascript選擇表格中的所有複選框

回答

相關問題