选中复选框时,如何使用javascript选择一行单选按钮

我需要做的是检查是否选中了复选框,如果是,请选择位于同一元素内的所有单选按钮?

我已经设置了具有id,b / c的元素,这是将相互影响的元素的“物理”分组。

我正在尝试做这样的事情onchange(’some_row_id’):

function select_row(row_id) { // Get 1st td element (where checkbox is located) and assign its // checked value to variable "checked" var checked = document.getElementById(row_id).td[0].input.checked; if(checked) { var children = document.getElementById(row_id).childNodes; for(var i = 0; i< children.length; i++) { if(children.td.type == radio) { children.td.radio = checked; } } } } 

我知道javascript差不多200%,但是我无法弄清楚如何正确选择tr元素的td子(或者优选只输入孙子)并检查它们。

这是实际工作html中的基本表单结构:

 
Select entire rowitem_codedescriptionpage
15038 For 1st item, alternate 1 5
15038 For 1st item, alternate 2 5

编辑:我愿意接受jquery解决方案。 谢谢。

编辑2:感谢nnnnnn。 我使用你的JS并添加了这个以获得我想要的取消选中行为。 如果你想要,你可以用它更新你的答案,我会从这里删除它:

  else if (!row.cells[0].childNodes[0].checked) { inputs = row.getElementsByTagName("input"); for(var i=0; i<inputs.length; i++) { if(inputs[i].type === "radio") { inputs[i].checked = false; } } } 

那么这是一种方法:

 function select_row(row_id) { // get a reference to the row based on the id passed in var row = document.getElementById(row_id), inputs; // .cells[0] gives the row's first td element, // then .childNodes[0] gives that td's first child element which // will be the checkbox if (row.cells[0].childNodes[0].checked) { // getElementsByTagName gives all descendent elements with the matching // tag, not just direct children, so get all the inputs for the current // row and loop through them looking for the radios inputs = row.getElementsByTagName("input"); for (var i=0; i 

并更改您的复选框以使用onclick=...而不是onchange=...

请注意,使用复选框选择行并不是很有意义,因为选择一行后,如果单击另一行的复选框,则仍会选中第一行的复选框。 为此目的,您可能最好使用按钮或元素。

另请注意,不是将行ID传递给函数,而是使用ID获取对该行的引用,如下所示:

  function select_row(row_id) { var row = document.getElementById(row_id); // etc 

您可以直接将引用传递给单击的复选框,然后使用该复选框:

  function select_row(cb) { var row = cb.parentNode.parentNode; if (cb.checked) { // etc 

然而,在上面的完整解决方案中,我坚持像你一样传递ID,以防你从除了click事件以外的某个地方调用函数。

发布的代码有几个问题:

  • 你只能通过getElementById(row_id).td[0].input它们的类型来获取特定元素的子元素,例如, getElementById(row_id).td[0].input不起作用。 要获得第一个td,您可以使用行的cells集合并说出.cells[0] (就像在我的代码中一样)。

  • 你的for循环不使用循环中的i变量来选择单个项目。 你应该在循环中说children[i]

  • 你的if语句: if(children.td.type = radio) {正在做一个赋值(single = sign)而不是一个比较(double ==或triple === equals sign),并且应该与字符串"radio"进行比较"radio" (带引号)。

如果你想要jquery解决方案,那么这里是:

 $(document).ready(function() { $("#your_checkbpx_id").click(function() { if($(this).is(":checked")) { //select all your radio var id = $(this).attr("id"); $("tr[id='"+id+"'] > input[type='radio']").each(function() { //make it checked $(this).attr("checked", "checked"); }); } }); }); 

希望能帮助到你

这是一种方式:

  
Select entire row item_code page usd_dn
15838 284 $73.00
15838 299 $73.00
1611 66 $3,350.00
1611 66 $3,225.00