如何在選擇複選框時使用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>