I want a function to be fired whenever one option of a radio element is checked. How to do it using Jquery?

Question

There are many input radio elements on a web page and each radio element has several options. I want a function to be fired whenever one option of a radio element is checked. How to write the code using Jquery? One input element looks as follows:

<div class="below">
<input type="radio" value="information" name="option0"/>
information
<input type="radio" value="communication" name="option0"/>
communication
<input type="radio" value="goods" name="option0"/>
goods
<input type="radio" value="attention" name="option0"/>
attention
</div>

I wrote the code as follows:

$(":radio").checked(function() {
    alert(this.value);

});

But it doesn't work. How to do it?

Answer 1

Try:

$(':radio').click(function(evt){
    if ($(this).attr('checked'))
    {
        alert($(this).val());
    }
});

Answer 2

checked is not an event, you should use click or change.

Also I want to notice that is recommended to use input:radio instead of only :radio, because that pseudo-selector will be evaluated as *:radio and it can be quite slow:

$('input:radio').click(function () {
  if (this.checked) { // or $(this).attr('checked')
    alert(this.value); // or alert($(this).val());
  }
});

Answer 3

I think something like this should do it.

$("input:checked").each(function(){
 alert($(this).val());
}