Skip to content
Advertisement

Change class of parent div if radio input checked

I’ve been searching and searching google for answers to my question but have been unsuccessful so far. I’m hoping one of you guys could give me some assistance.

Example is published HERE.

My goal is to have the table containing the selected radio button className be change to “selected” when the radio is selected, and “container” when the radio is not selected.

I have 10 divs with the class name “dividend” holding a table with the className of “container” then two smaller tables inside that. Within the container table at the bottom is a hidden radio button with the name “page1”. Then another 10 of the same but the input names are “page2”

I wrote an onClcick for the container table so the user can select the whole table instead of the radio button, but not I’m trying to change the style of the selected container so the users know they have selected it.

I have tried a few different methods and I’m able to change the style to the new class by just writing

 document.getElementById('container').className = 'selected';

But because all 10 divs share the same name it will only change the style of the first element it finds.

So I tried writing this loop to check if there are any selected radios in the document then to change the else name the style as the default.

I’m sure its something stupid but I’m pretty stumped atm.. Any help would be appreciated.

Thanks.

//check for check = true
selected = function () {
var divs = document.getElementByTagName('DIV'),
    div,
    tbl = divs.getElementById('TABLE'),
    rad,
    stat,
    i;

    for (var i = 0; i < divs.length; i++) {
// no .id but the counter of the loop
div = div[i];
// check the className not the div element
if (div.className == 'dividend') {

    rad = tbl.getElementsByTagName('INPUT');

    if (tbl.className == 'container') {
    if (rad[0].checked == true) {
        tbl.className = 'selected'; 
    } 
}
}
}
};


// Gets radio button for selected element in Page1 and checks
function P1sClick(n){ 
document.forms["myform"]["page1"][n].checked=true;
selected();
};

// Gets radio button for selected element in Page2 and checks
function P2sClick(n){ 
 document.forms["myform"]["page2"][n].checked=true;

};

////////////HTML  I only included 2 examples of the DIVs because its a lot of code/////

<form name="myform" action="sample.asp" method="POST">

<h2>Page 1</h2>

<div class="dividend>
<table class="container" onclick="P1sClick(0)" cellpadding="0" cellspacing="0"><tr><td valign="top" >
  <table class="grid" cellpadding="0" cellspacing="0">
<tr><td width="40" height="25" style="border-bottom:1px solid #000; border-    right:1px solid #000;">1</td></tr>
    <tr><td height="25" style="border-bottom:1px solid #000; border-right:1px solid #000;">2</td></tr>
    <tr><td height="25" style="border-bottom:1px solid #000; border-right:1px solid #000;">3</td></tr>
    <tr><td height="25" style="border-right:1px solid #000;">4</td></tr>
  </table>
</td><td valign="top">
  <table class="grid" cellpadding="0" cellspacing="0">
    <tr><td width="40" height="25" style="border-bottom:1px solid #000;">5</td></tr>
    <tr><td height="25" style="border-bottom:1px solid #000;">6</td></tr>
    <tr><td height="25" style="border-bottom:1px solid #000;">7</td></tr>
    <tr><td height="25">8</td></tr>
  </table>
</td></tr>
<tr><td colspan="2" align="center" height="20" style="padding-top:3px; font-weight:bold; font-style:italic;">4x4<br><input type="radio" name="page1" title="4 by 4" value="4x4" style="display:none;"></td></tr></table>
</div>

<div class="dividend">
<table class="container" onclick="P2sClick(0)" cellpadding="0" cellspacing="0"><tr><td valign="top">
      <table class="grid" cellpadding="0" cellspacing="0">
    <tr><td width="40" height="25" style="border-bottom:1px solid #000; border-right:1px solid #000;">1</td></tr>
    <tr><td height="25" style="border-bottom:1px solid #000; border-right:1px solid #000;">2</td></tr>
    <tr><td height="25" style="border-bottom:1px solid #000; border-right:1px solid #000;">3</td></tr>
    <tr><td height="25" style="border-right:1px solid #000;">4</td></tr>
  </table>
</td><td valign="top">
  <table class="grid" cellpadding="0" cellspacing="0">
    <tr><td width="40" height="33" style="border-bottom:1px solid #000;">5</td></tr>
    <tr><td height="33" style="border-bottom:1px solid #000;">6</td></tr>
    <tr><td height="34">7</td></tr>
  </table>
</td></tr>
<tr><td colspan="2" align="center" height="20" style="padding-top:3px; font-weight:bold; font-style:italic;">4x3<br><input type="radio" name="page2" title="4 by 3" value="4x3" style="display:none;"></td></tr></table>
    </div>

UPDATE:

So I’ve been looking into jQuery and found THIS post here. I’m trying out this function which looks like it should work to me, but isn’t. Maybe you can tell me if this is a better route to go..

$(document).ready(function() {  
$('input[type="radio"]').change( function() {
  //   grab all the radio buttons with the same name as the one just changed
    var this_radio_set = $('input[name="'+$(this).attr("page1")+'"]');

    // iterate through each  
//     if checked, set its parent label's class to "selected"
//     if not checked, remove the "selected" class from the parent label
//     my HTML markup for each button is  <label><input type="radio" /> Label Text</label>
//     so that this works anywhere even without a unique ID applied to the button and label
    for (var i=0; i < this_radio_set.length;i++) {
    if ( $(this_radio_set[i]).is(':checked') )             $(this_radio_set[i]).parent('table').addClass('selected');
        else $(this_radio_set[i]).parent('table').removeClass('selected');
}
});
});

UPDATE I have updated my jQuery with the following corrections made by BobS. I’m now using jQuery to select the radio with the click of the table, and jquery to change the style when the radio is checked. For some reason I’m having trouble combining these two functions, so when you click the table and the radio is checked, then the style changes as well. Heres my latest code, hopefully someone can help me with this :p

// jQuery to select radio button within clicked table
$(function() {

$('table').click(function(event) {  

    if(event.target.type != "radio") {

        var that = $(this).find('input:radio');
        that.attr('checked', !that.is(':checked'));

    }
});
});

// jQuery to change the style of the table containing the selected radio button
$(function() {
$('input[type="radio"]').change( function() {
  //   grab all the radio buttons with the same name as the one just changed
    var this_radio_set = $('input[name="'+$(this).attr("name")+'"]');

    for (var i=0; i < this_radio_set.length;i++) {
    if ( $(this_radio_set[i]).is(':checked') )         
      $(this_radio_set[i]).closest('table').addClass('selected');
        else 
        $(this_radio_set[i]).closest('table').removeClass('selected');
}
});
});

Advertisement

Answer

Some things that may help you:

You seem to have dropped the id’s for your elements in your recent edits. This is fine, but you’ll then have to loop through stuff. You also should not expect getElementById to return elements based on the class in the element; that only applies to id’s.

However, your “container” table in this case is always an immediate child of the “dividend” div, so you can use techniques such as 

tbl=div.childNodes[0];

to get the table.

Be careful about class name comparison: if an element has more than one class name (acquired through inheritance), it may look like “fooclass dividend”, and then your string comparison using == will not work. Use a regex or string splitting for this.

I would also like to reiterate what everyone else is saying: stop what you’re doing and learn jQuery 🙂

UPDATE after xxstevenxo provided some jQuery code:

I did 3 things to get your new jQuery code to do something like what you want:

  1. I got rid of the definition of the “selected” function, since it had a number of errors that was making the script exit before it hit your sample jQuery code. Maybe you weren’t having that problem — depends on the sum total of what your JavaScript looked like.

  2. When you refer to $(this).attr(“page1”) that should actually be $(this).attr(“name”) which will give you “page1” if you click the radio button for page1

  3. Used “closest” instead of “parent”. parent only goes up one level, and the “table” selector only serves to filter based on whether the immediate parent is or is not a table. closest continues up the tree until it finds a match.

Once I made those 3 changes, the jQuery was doing something close to what you had in mind, at least when the radio button is clicked.

You should probably take that anonymous function in your “change” action and use it in place of your “selected” function so that the style change would also take effect when the user clicks on the table.

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement