67774

How to use javascript to select a row of radio buttons when a checkbox is selected

Question:

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?

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.

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

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.

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>

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

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

Answer1:

Well here's one way to do it:

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

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

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.

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

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:

<ul><li>

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

</li> <li>

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.

</li> <li>

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

</li> </ul>

Answer2:

If you want jquery solution then here it is:

$(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"); }); } }); });

Hope it helps

Answer3:

Here is a way:

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

Recommend

  • Cumulative Sum per item in DB2
  • How to remove element added after AJAX call in jQuery?
  • How to overwrite the rdd saveAsPickleFile(path) if file already exist in pyspark?
  • Django admin - How to calculate a field value depending on other model field values
  • How to select multiple rows at different place in a table using Selenium Webdriver
  • Getting the 'co-ordinates' of a cell using jQuery
  • Getting the inner-most row in the embedded tables
  • How can I refresh the entire table sorting cache after dynamic table update?
  • Wiring top-level DAGs together
  • applying background to first, and every third row in a dynamically generated table
  • dynamically set table titles with jquery's Datatables plugin - get titles from data object
  • Duplicate Entries in DB
  • How to include custom CSS or Javascript on a Content Item in Orchard
  • regex, multiline extract in R
  • Binding Dynamic URL to FB like Button in angular2
  • Selenium - How to skip the record from the Set after the its first occurrence
  • update record in database using jdatabase
  • quiver not drawing arrows just lots of blue, matlab
  • Suppressing passwd when calling sqlplus from shell script
  • How can the INSERT … ON CONFLICT (id) DO UPDATE… syntax be used with a sequence ID?
  • QLPreviewController hide print button in ios6
  • C# - Is there a limit to the size of an httpWebRequest stream?
  • Uncaught Error: Could not find module `ember-load-initializers`
  • Can Jackson SerializationFeature be overridden per field or class?
  • vba code to select only visible cells in specific column except heading
  • htaccess rewriting URLs with multiple forward slashes
  • Display Images one by one with next and previous functionality
  • ORA-29908: missing primary invocation for ancillary operator
  • Web-crawler for facebook in python
  • How to get next/previous record number?
  • Unanticipated behavior
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • A cron job substitute?
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How do you join a server to an Active Directory (domain)?
  • How does Linux kernel interrupt the application?
  • Can't mass-assign protected attributes when import data from csv file
  • Unable to use reactive element in my shiny app
  • How to push additional view controllers onto NavigationController but keep the TabBar?