Question

How can I show and hide the following DIVs when radio button clicked?

<form name="form1" id="my_form" method="post" action="">
    <div><label><input type="radio" id=radio1_1" name="radio_1" value="1">Yes</label>
    <label><input type="radio" id=radio1_2" name="radio_1" value="2">Yes</label>
    </div>

    <div id="yes_wrap_1" style="display:none">test1</div>
    <div id="no_wrap_1" style="display:none">test2</div>

    <div><label><input type="radio" id=radio2_1" name="radio_2" value="1">Yes</label>
    <label><input type="radio" id=radio2_2" name="radio_2" value="2">Yes</label>
    </div>  

    <div id="yes_wrap_2" style="display:none">test1</div>
    <div id="no_wrap_2" style="display:none">test2</div>

    --------------- 


      ----------
    <input type="submit" value="Submit">
</form>

And here I am hard coding the first radio button clicked and trying to hide and show the first group of DIVs.
But I have the same structure dynamically generated 10 Radio button groups and 10 DIVs groups. I would like to use the same function to handle other Radio button groups. Could you please let me know how to achieve this? Thank you.

$(document).ready(function(){ 
    $("input[name$='radio_1']").click(function() {
       if ($(this).val() === '1') 
        {       
             $("#yes_wrap_1").show();
             $("#no_wrap_1").hide();
         } 
        else if ($(this).val() === '2') 
        {       
             $("#yes_wrap_1").hide();
             $("#no_wrap_1").show();
        }  
    }); 
});

Answer 1

How about you add a class to the radios, like say, “switch”, and you do this:

$("input.switch").click(function() {
       var value = $(this).attr('id').substring(7);
       $("#yes_wrap_" + value).show();
       $("#no_wrap_" + value).hide();
});