Javascript 过滤表然后 select 所有复选框

Question

I have an html table with a checkbox on each row. My javascrpt filters rows based on a text box above the table. I need a function that will only check the boxes on visible rows. I'm stumped.

chkbuild is the name of all the checkboxes in the table. ID is unique. chkallnone is my header checkbox to select all or none.

example of table row cell

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

Javascript code for selecting checkboxes.

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

}

Comments added 08/23/2022 My table row has <tr data-link="filename.php" data-target="_SELF"> and the javascript has this function which live filters the table.

$("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

I have added som emarkup that seems to fit part of your description. The following snippet works in the way that it

• checks/unchecks all the table chekckboxes with [name=chkbuild]
• window.open() s new windows for all <tr> s with the appropriate data tags set.

The target "_SELF" will of course open the new page in the original location, leading to a white page, while all other data-target values will not work here in SO because of sandbox restrictions.

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

Please note that the "other" checkbox with the text "checkbox 6" behind it is unaffected from clicks on #chkallnone . This is by design as its name is not chkbuild .