CODEWITHSUNDEEP
javascriptjquery
user1038814
user1038814

Reputation: 9677

get the id of radio button group in Jquery

I have a group of radio buttons with the name 'periodType'. There is one radio button in that group which behaves the same way as the others, except for the fact that it displays an additional div. How can I get to know when that particular radio button is checked, as the change function below is quite generic for all the radio buttons in the group:

  $('input[name="periodType"]').change(function() {
        if(this.checked) {
            //do something (for all radio buttons)
            //If unique radio button also do this
        }
    }); 

    <input type="radio" name="periodType" default>
<input type="radio" name="periodType" default>
<input type="radio" name="periodType" default>
<input type="radio" name="periodType" default>

Upvotes: 0

Views: 704

Answers (3)

haroonxml
haroonxml

Reputation: 366

May be you are looking for something like this. I have added each radio to its own div just to show the behaviour on change. Please let me know if you have any questions.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title></title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

        <style type="text/css">
            .selected{background-color: #fad42e;}
            .notSelected{background-color: #6f6e73;}
        </style>
        <script type="text/javascript">


            $(document).ready(function () {


                $('input[name="periodType"]').change(function() {
                    $(this).parent('div').removeClass();
                    $(this).parent('div').addClass('selected');

                    $('input[name="periodType"]')
                            .parent('div')
                            .not($(this).parent("div"))
                            .each(function(e){
                                $(this).removeClass();
                                $(this).addClass("notSelected");
                            });
                });



            });




        </script>
    </head>
    <body>

    <div>
        <input type="radio" name="periodType" >
    </div>
    <div>
        <input type="radio" name="periodType" >
    </div>
    <div>
        <input type="radio" name="periodType" >
    </div>
    <div>
        <input type="radio" name="periodType" >
    </div>

    </body>
    </html>

Upvotes: 0

Liam
Liam

Reputation: 29760

$('input[name="periodType"]').change(function() {
        if(this.checked) {
            //do something (for all radio buttons)
            //If unique radio button also do this
           var idval = $(this).attr("id");
           if (idval == "something")
           {
             //do something
            }
        }
    });

Upvotes: 0

rodneyrehm
rodneyrehm

Reputation: 13557

You may want to add a value to your radio inputs:

<input type="radio" name="periodType" value="one" default>
<input type="radio" name="periodType" value="two" default>
<input type="radio" name="periodType" value="three" default>
<input type="radio" name="periodType" value="four" default>

and then query that value:

$('input[name="periodType"]').change(function() {
  if (this.value == 'three' && this.checked) {
    //do something (for all radio buttons)
    //If unique radio button also do this
  }
});

Upvotes: 1

Related Questions