Javascript 過濾表然后 select 所有復選框

Question

我有一個 html 表，每行都有一個復選框。 我的 javascrpt 根據表格上方的文本框過濾行。 我需要一個 function，它只會選中可見行上的框。 我難住了。

chkbuild 是表中所有復選框的名稱。 ID 是唯一的。 chkallnone 是我的 header 復選框到 select 全部或無。

表格行單元格示例

<td><input type="checkbox" id="(counter)" name="chkbuild" value="(unique ids)"></td>

Javascript 代碼用於選擇復選框。

  function checkCheckboxes( id, pID ){
var ele=document.getElementsByName('chkbuild');  
var TrueFalse = true;
//determine if the select all checkbox is checked or unchecked.
if (document.getElementById('chkallnone').checked) {
    TrueFalse = true;
} else {
    TrueFalse = false;
}
//cycle through all table checkboxes and set their checked value
for(var i=0; i<ele.length; i++){  
    ele[i].checked=TrueFalse;  
}

}

2022 年 8 月 23 日添加的評論 我的表格行有<tr data-link="filename.php" data-target="_SELF">並且 javascript 有這個 function 可以實時過濾表格。

$("table tr").click(function(e) {
var u = $(this).data("link");
var t = $(this).data("target");
console.log(u, t);
if (t.length) {
  window.open(u, t);
} else {
  window.location.href = u;
}
});

Answer 1

我添加了一些似乎符合您描述的部分標記。 以下代碼段的工作方式是

• 使用[name=chkbuild]檢查/取消選中所有表檢查框
• window.open() s new windows 適用於所有<tr> s，並設置了適當的數據標簽。

目標“_SELF”當然會在原始位置打開新頁面，導致出現白頁，而由於沙盒限制，所有其他data-target在 SO 中將不起作用。

 // check/unchek all target checkboxes: document.getElementById("chkallnone").onclick=ev=> document.querySelectorAll("table [name=chkbuild]").forEach(c=>c.checked=ev.target.checked); // add click event handler on filtered TRs: document.querySelector("table").onclick=ev=>{ const tr=ev.target.closest("tr"); // tr = closest TR parent element if (tr.dataset.link>"") { console.log(`redirecting to ${tr.dataset.link} in target window ${tr.dataset.target}`) window.open(tr.dataset.link,tr.dataset.target); } }

 <label><input type="checkbox" id="chkallnone"> all checkboxes</label> <table> <thed> <tr> <th>this is the first column</th> <th>and this is the second one</th> </tr> </thead> <tbody> <tr data-link="filename1.php" data-target="win1"> <td>data</td> <td>link1</td> </tr> <tr data-link="filename2.php" data-target="_SELF"> <td>data</td> <td>link2 - target self.</td> </tr> <tr> <td><input type="checkbox" id="cb1" name="chkbuild" value="1"></td> <td>checkbox 1</td> </tr> <tr data-link="filename3.php" data-target="win3"> <td>data</td> <td>link3</td> </tr> <tr> <td>no data</td> <td>and no link</td> </tr> <tr> <td><input type="checkbox" id="cb2" name="chkbuild" value="1"></td> <td>checkbox 2</td> </tr> <tr> <td><input type="checkbox" id="cb3" name="chkbuild" value="3"></td> <td>checkbox 3</td> </tr> <tr data-link="filename5.php" data-target="win5"> <td>data</td> <td>link5</td> </tr> <tr> <td><input type="checkbox" id="cb4" name="chkbuild" value="4"></td> <td>checkbox 4</td> </tr> <tr> <td><input type="checkbox" id="cb6" name="other" value="6"> other</td> <td>checkbox 6</td> </tr> <tr data-link="filename6.php" data-target="_SELF"> <td>data</td> <td>link6 - target self!</td> </tr> <tr data-link="filename7.php" data-target="win7"> <td>data</td> <td>link7</td> </tr> <tr> <td><input type="checkbox" id="cb5" name="chkbuild" value="5"></td> <td>checkbox 5</td> </tr> </tbody> </table>

請注意，后面帶有文本“復選框 6”的“其他”復選框不受點擊#chkallnone的影響。 這是設計使然，因為它的名稱不是chkbuild 。