How to pass selected value to javascript function from radio button

Question

I have three radio buttons which all have hidden <div> 's under each of them (this radio button works if I didn't bind them to the model). If you click <div> one and decided to click a second radio button, it will hide the first one and this also applies to the other one.

However, each radio button has its own functionality which it will perform. So on the controller I have an If-statement for each radio button. After I have bound each radio button to the model, they no longer work and they don't get de-selected when I select another radio button and no longer hide <div> 's. I am not sure if there's something I am missing. Thanks.

    Razor Code

     <div class="form-group" style="margin-left: 165px;">    
        <div class="radio-inline">
            @Html.RadioButtonFor(model => model.Isrd1, "one",true, new { id = "id1" }) Radio One
        </div>

        <div class="radio-inline">
            @Html.RadioButtonFor(m => m.Isrd2, "two", new { id = "id2" })Radio two
        </div>

         <div class="radio-inline">
            @Html.RadioButtonFor(m => m.Isrd3, "three", new { id = "id3" })Radio three
        </div>
    </div>

My model:

    public class ModelSelection
    { 
         public string Types { get; set; }

         public string Isrd1 { get; set; }
         public string Isrd2 { get; set; }
         public string Isrd3 { get; set; }
    }

My controller:

     if (md.Types == "one")
     {
     }

     if (md.Types == "two")
     {
     }

     if (md.Types == "three")
     {
     }

My JavaScript:

          $('input[name=Isrd1]').click(function () {
                if (this.id == "id1") {
                    $("#div1").show('slow');
                    $("#div2").hide('slow');
                    $("#div3").hide('slow');
                }
            });

             $('input[name=Isrd2]').click(function () {
                if (this.id == "id2") {
                    $("#div2").show('slow');
                    $("#div1").hide('slow');
                    $("#div3").hide('slow');

               $('input[name=Isrd3]').click(function () {
                if (this.id == "id3") {
                    $("#div3").show('slow');
                    $("#div1").hide('slow');
                    $("#div2").hide('slow');

Answer 1

The Radio button works mutually exclusively when they are having same name, so make sure you are having final generated HTML of radios with same name, then only when you select one radio, another will get deselect.

final HTML be Like

<div class="radio-inline">
    <input id="id1" name="radio" value="1" /> <label>radio 1</label>
</div>
<div class="radio-inline">
    <input id="id2" name="radio" value="2" /><label>radio 2</label>
</div>
<div class="radio-inline">
    <input id="id3" name="radio" value="3" /><label>radio 3</label>
</div>

The models you defined can then be handled using either class selector or on basis of id.

Either you should have code your radio button like

@Html.RadioButtonFor(model => model.Isrd, "one",true, new { id = "id1" })
@Html.RadioButtonFor(model => model.Irsd,"two", true, new {id = "id2"})
@Html.RadioButtonFor(model => model.Irsd,"three", true, new {id = "id3"})

this way your radio button will work the way they should work, ie mutually exclusive