How to show/slide down a related radio button in javascript or jquery

Question

My question in title may not make sense but what I am trying to do is:

When I click text1's radio button, the subtext1's radio button will show up. Then when text2's radio buttonis clicked, subtext2's radio button will show up, meanwhile hiding subtext1's radio button and uncheck subtext1's radio button if it is checked before. Element id here is created in sequence from backend.

<form name="myForm">
    text1: <input type="radio" id="r1" name="myRadio"  value="1" onchange="action()"/>
      <div>subtext1: <input type="radio" id="r1" name="mysubRadio"  value="11" /></div>
    text2: <input type="radio" id="r2" name="myRadio"  value="2" onchange="action() />
      <div>subtext2: <input type="radio" id="r2" name="mysubRadio"  value="22" /></div> 
</form>

I try to use

document.getElementById('r1').getElementByName('myRadio') 

to get specific radio button but it seems to be a bad syntax.

Anyone can provide a clue how I can know the sub radio button to show with related parent radio button I checked in javascript?

Answer 1

Solution with jQuery:

 $(function() { var myRadios = $('input[name=myRadio]'); // cache all once var mysubRadios = $('input[name=mysubRadio]'); myRadios.on('change', function(e) { e.stopPropagation(); //cancel event bubbling myRadios.next('div').hide(); // hide all sub text mysubRadios.prop('checked', false); // un mark all sub radios $(this).next('div').show(); // show sub text for the current one }); myRadios.next('div').hide(); // hide all sub text on page load }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form name="myForm"> text1: <input type="radio" name="myRadio" value="1" /> <div>subtext1: <input type="radio" name="mysubRadio" value="11" /> </div> text2: <input type="radio" name="myRadio" value="2" /> <div>subtext2: <input type="radio" name="mysubRadio" value="22" /> </div> </form> 

Solution with plain js & css:

 var toggle = function() { var mysubRadio = document.getElementsByName('mysubRadio'); var i = mysubRadio.length; var p; var el; var inp; while (i--) { // loop through each sub radios el = p = mysubRadio[i].parentNode; // get the parent div of radio while (el.previousSibling && !el.nodeName.match(/input/i)) { // get prev sibling input of the div el = el.previousSibling; } p.style.display = el.checked ? 'block' : 'none'; // show/hide sub text as per selection mysubRadio[i].checked = false; //un check } }; 

 input[name=myRadio] + div { display: none; /* hide all sub text on page load */ } 

 <form name="myForm"> text1: <input type="radio" name="myRadio" value="1" onchange="toggle()" /> <div>subtext1: <input type="radio" name="mysubRadio" value="11" /> </div> text2: <input type="radio" name="myRadio" value="2" onchange="toggle()" /> <div>subtext2: <input type="radio" name="mysubRadio" value="22" /> </div> </form> 

Both solutions didn't use ids

Edited: 10:04 AM (IST), 04th Aug 2015

Solution with reference to fiddle

 $(function() { var myRadios = $('input[name=myRadio]'); // cache all once var mysubRadios = $('input[name=mysubRadio]'); myRadios.on('change', function(e) { e.stopPropagation(); //cancel event bubbling myRadios.closest('tr').next('tr').hide(); // hide all sub text mysubRadios.prop('checked', false); // un mark all sub radios $(this).closest('tr').next('tr').show(); // show sub text for the current one }); myRadios.closest('tr').next('tr').hide(); // hide all sub text on page load }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form name="myForm"> <table> <tr> <td>text1:</td> <td> <input type="radio" id="r1" name="myRadio" value="1" class="super" /> </td> </tr> <tr> <td> <table> <tr> <div class='subradio'>subtext1: <input type="radio" id="r2" name="mysubRadio" value="11" class='subradio' /> </div> </tr> </table> </td> </tr> <tr> <td>text2:</td> <td> <input type="radio" id="r3" name="myRadio" value="2" class="super" /> </td> </tr> <tr> <td> <table> <tr> <div class='subradio'>subtext2: <input type="radio" id="r4" name="mysubRadio" value="22" class='subradio' /> </div> </tr> </table> </td> </tr> </table> </form> 

PS Html elements must have unique ids

Answer 2

First of all, you cannot have multiple elements with the same id on the same page. Remove the ids for the sub-radio buttons and add them to div as like id='r1a'/'r2a' So ids for the sub radio buttons and you can do the following:

if (document.getElementById('r1').checked) {
    document.getElementById('r2').checked = false;
    document.getElementById('r2a').style.visibility = 'hidden';
    document.getElementById('r1a').style.visibility = 'visible';
} else if (document.getElementById('r2').checked) {
    document.getElementById('r1').checked = false);
    document.getElementById('r2a').style.visibility = 'visible';
    document.getElementById('r1a').style.visibility = 'hidden';
}

Answer 3

You should not have multiple ID's on single page, but if you must you can use querySelectorAll and do something like this:

Html:

<form name="myForm">
    text1:
    <input type="radio" id="r1" name="myRadio" value="1" onchange="MyAction(this.id)" />
    <div>
        subtext1:
        <input type="radio" id="r1" name="mysubRadio" value="11" />
    </div>
    text2:
    <input type="radio" id="r2" name="myRadio" value="2" onchange="MyAction(this.id)" />
      <div>subtext2: 
<input type="radio" id="r2" name="mysubRadio"  value="22" />
</div> 
</form>

JS:

function MyAction(id) {
    var elements = document.querySelectorAll("#"+id);
    for (i = 0; i < elements.length; i++) {
        if (elements[i].getAttribute("name") == "mysubRadio") {
            elements[i].parentNode.style.visibility = "hidden";
        }
    }
}

fiddle example

Answer 4

Using jQuery you can do this simply if you add classes to the parents and sub radios:

<form name="myForm">text1:
    <input type="radio" id="r1" name="myRadio" value="1" class="super" />
    <div class='subradio'>subtext1:
        <input type="radio" id="r2" name="mysubRadio" value="11" class='subradio' />
    </div>text2:
    <input type="radio" id="r3" name="myRadio" value="2" class="super" />
    <div class='subradio'>subtext2:
        <input type="radio" id="r4" name="mysubRadio" value="22" class='subradio' />
    </div>
</form>


$('.super').on('change', function () {
    $('div.subradio').hide();
    $(this).next('.subradio').show().find('input.subradio').prop('checked', true);
});

NOTE: no need to "uncheck" since the radios have the same name property when you check one, the other(s) get unchecked.

Sample of the working code here: http://jsfiddle.net/MarkSchultheiss/jy807kgo/