选中复选框时,如何使用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中的基本表单结构:
编辑:我愿意接受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