选中复选框后如何使用JavaScript选择单选按钮行 [英] How to use javascript to select a row of radio buttons when a checkbox is selected

问题描述

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

What I need to do is check to see if the checkbox is checked, and if so, select all the radio buttons located within the same element?

我已经设置了ID为b/c的元素，b/c是相互影响的元素的物理"分组.

I've set up the elements with id's, b/c that is the "physical" grouping of the elements that will be affecting each other.

我正在尝试执行类似onchange('some_row_id')的操作:

I'm trying to do something like this 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子代(最好是仅输入子代)并进行检查.

I know that javascript is almost 200% wrong, but I can't figure out how to properly select only td children (or prefereably, only input grandchildren) of a tr element and check them.

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

Here's the basic form structure in actual working html:

<form name="form2" action="testfile4.php" method="get">
<table border="1"><thead>
    <tr><th>Select entire row</th><th>item_code</th><th>description</th><th>page</th>
      </tr>
</thead>
<tbody>
    <tr id="534">
        <td ><input type="checkbox" onchange="select_row(534);"></td>       <td>15038         <input type="radio" name="15819-038|item_code" value="534" /></td>
        <td>For 1st item,  alternate 1
        <input type="radio" name="15819-038|description" value="534" /></td>
        <td>5
          <input type="radio" name="15819-038|page" value="534" /></td>
      </tr>
    <tr id="535">
        <td ><input type="checkbox" onchange="select_row(535);"></td>       <td>15038         <input type="radio" name="15819-038|item_code" value="535" /></td>
        <td>For 1st item, alternate 2         <input type="radio" name="15819-038|description" value="535" /></td>
        <td>5
          <input type="radio" name="15819-038|page" value="535" /></td>
      </tr>
    </tbody>
    </table>
    </form>

我愿意接受jquery解决方案.谢谢.

I'm willing to accept jquery solutions. Thank you.

感谢nnnnnn.我使用了您的JS，并添加了它以实现我想要的取消选中行为.如果您愿意，可以使用它来更新答案，我将从这里将其删除:

EDIT 2: Thanks to nnnnnn. I used your JS and added this to have the uncheck behavior I wanted. If you want you can update your answer with it and I'll remove it from here:

 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<inputs.length; i++) {
         if (inputs[i].type==="radio")
             inputs[i].checked = true;
      }
   }
}

然后将您的复选框更改为使用onclick=...而不是onchange=....

And change your checkbox to use onclick=... instead of onchange=....

请注意，使用复选框选择一行并没有什么意义，因为选择一个后，如果您单击另一行的复选框，则第一行的复选框仍会被选中.为此，最好使用按钮或<a>元素.

Note that using checkboxes to select a row doesn't really make sense because after selecting one, if you click another row's checkbox the first row's checkbox is still checked. You might be better off with a button or <a> element for this purpose.

还请注意，不要将行ID传递给函数，然后使用该ID获取对该行的引用，如下所示:

Note also that instead of passing the row ID to the function and then getting a reference to that row using the ID, like this:

<input type="checkbox" onclick="select_row(534)">

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

您可以将引用直接传递到所单击的复选框，并使用该引用:

You can directly pass a reference to the checkbox that was clicked and use that instead:

<input type="checkbox" onclick="select_row(this);">

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

但是，在上面的完整解决方案中，我坚持要传递ID，就像您从点击事件以外的其他地方调用函数一样.

However in my full solution above I stuck with passing the ID like you did in case you are calling the function from somewhere other than just the click event.

发布的代码有几处错误:

There were several things wrong with your code as posted:

• 仅通过引用其类型就无法获得特定元素的子级，例如，getElementById(row_id).td[0].input不起作用.要获取第一个td，您可以使用行的cells集合并说.cells[0](就像在我的代码中一样).

• You can't get children of a particular element just by refering to their type, e.g., getElementById(row_id).td[0].input doesn't work. To get the first td you can use a row's cells collection and say .cells[0] (like in my code).

您的for循环在循环内不使用i变量来选择单个项目.您应该在循环中说过children[i].

Your for loop doesn't use the i variable within the loop to select the individual items. You should've said children[i] within the loop.

您的if语句:if(children.td.type = radio) {正在执行赋值(单=号)，而不是进行比较(双==或三重===等号)，并且应与字符串"radio"(带有引号).

Your if statement: if(children.td.type = radio) { is doing an assignment (single = sign) instead of a comparison (double == or triple === equals sign), and should be comparing to the string "radio" (with quotes).

这篇关于选中复选框后如何使用JavaScript选择单选按钮行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！