如何在选择复选框时使用javascript选择一排单选按钮

Question

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

我已经设置了id为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％错误的，但我无法弄清楚如何正确地只选择TD孩子（或者优秀的，只有输入孙辈）的tr元素并检查它们。

下面是实际工作的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=... instea d的onchange=...。

请注意，使用复选框选择一行并没有什么意义，因为在选择一行后，如果您单击另一行的复选框，第一行的复选框仍会被选中。为了达到这个目的，你最好用一个按钮或者一个元件。

还要注意，而不是将行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]（就像在我的代码中）。

• 您的循环不使用循环内的i变量来选择单个项目。你应该已经说过了内环路children[i]。

• 你的if语句：if(children.td.type = radio) {是做一个赋值（单等号），而不是比较（双==或三===等号），并应比较字符串"radio"（带引号）。

Answer 2

如果你想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"); 
     }); 
    } 
    }); 
}); 

希望它可以帮助

Answer 3

这里有一个办法：

<script type="text/javascript"> 
    /* 
    Loops through all input elements finding all checkboxs. 
    Testing if the current checkbox obj is equal to the selected checkbox object. 
    If equal: Set the radio button to the current state of the checkbox. 
    Not equal: Set its children radio buttons checked property false 
    --------------------------------------------------------------------------- */ 
    function setCheckboxs(checkBox) { 
     var parent, i; 
     var checkBoxs = document.getElementsByTagName("input"); 
     for (i = 0; i < checkBoxs.length; i++) { 
      if (checkBoxs[i].getAttribute("type") === "checkbox") { 
       parent = checkBoxs[i].parentNode.parentNode; 
       if (checkBox === checkBoxs[i]) { 
        toggleRadios(parent.childNodes, checkBoxs[i].checked); 
       } else { 
        checkBoxs[i].checked = false; 
        toggleRadios(parent.childNodes, false); 
       } 
      } 
     } 
    } 
    /* 
    Loops through all its children nodes finding a node's attribute equal to radio 
    ----------------------------------------------------------------------------------- */   
    function toggleRadios(radios, isChecked) { 
     var i; 
     for (i = 0; i < radios.length; i++) { 
      if (radios[i].childNodes.length > 0) { 
       toggleRadios(radios[i].childNodes, isChecked); 
      } 
      if (radios[i].nodeName === "INPUT") { 
       if (radios[i].getAttribute("type") === "radio") { 
        radios[i].checked = isChecked; 
       } 
      } 
     } 
    } 
</script> 

<table border="1"> 
    <thead> 
     <tr> 
      <th> 
       Select entire row 
      </th> 
      <th> 
       item_code 
      </th> 
      <th> 
       page 
      </th> 
      <th> 
       usd_dn 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr id="534" class="15838"> 
      <td> 
       <input type="checkbox" onclick="setCheckboxs(this);" /> 
      </td> 
      <td> 
       15838<input type="radio" name="15838|item_code" value="534" /> 
      </td> 
      <td> 
       284<input type="radio" name="15838|page" value="534" /> 
      </td> 
      <td> 
       $73.00<input type="radio" name="15838|usd_dn" value="534" /> 
      </td> 
     </tr> 
     <tr id="535" class="15838"> 
      <td> 
       <input type="checkbox" onclick="setCheckboxs(this);" /> 
      </td> 
      <td> 
       15838 
       <input type="radio" name="15838|item_code" value="535" /> 
      </td> 
      <td> 
       299 
       <input type="radio" name="15838|page" value="535" /> 
      </td> 
      <td> 
       $73.00<input type="radio" name="15838|usd_dn" value="535" /> 
      </td> 
     </tr> 
     <tr id="565"> 
      <td> 
       <input type="checkbox" onclick="setCheckboxs(this);" /> 
      </td> 
      <td> 
       1611 
       <input type="radio" name="1611|item_code" value="565" /> 
      </td> 
      <td> 
       66<input type="radio" name="1611|page" value="565" /> 
      </td> 
      <td> 
       $3,350.00 
       <input type="radio" name="1611|usd_dn" value="565" /> 
      </td> 
     </tr> 
     <tr id="566"> 
      <td> 
       <input type="checkbox" onclick="setCheckboxs(this);" /> 
      </td> 
      <td> 
       1611 
       <input type="radio" name="1611|item_code" value="566" /> 
      </td> 
      <td> 
       66<input type="radio" name="1611|page" value="566" /> 
      </td> 
      <td> 
       $3,225.00 
       <input type="radio" name="1611|usd_dn" value="566" /> 
      </td> 
     </tr> 
    </tbody> 
</table>