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 。