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

Question

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

我已经用 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 中的基本表单结构:

<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 解决方案。谢谢。

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

Answer 1

这是一种方法:

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=... .

请注意，使用复选框选择一行并没有真正意义，因为选择一行后，如果单击另一行的复选框，第一行的复选框仍会被选中。您可能最好使用按钮或 <a>用于此目的的元素。

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

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

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

您可以直接传递对被单击的复选框的引用并使用它:

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

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

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

您发布的代码存在一些问题:

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

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

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