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

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 2

Try:

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

Answer 3

This example should do exactly what you want, but here is a synopsis:

$( input[type=radio] ).change(function (event) {
  if (this.checked) {
    alert( Value "  + this.value +  " from option group "  + this.name  " was selected. );
  }
});

Explanation:

$( input[type=radio] ) selects all radio buttons.
.change() sets the event handler for the change event. There is no "checked" event.
this.checked is true if the radio box is checked; false if not. The event will fire not only for the option that was just checked, but also the one that was just unchecked as well.
this.value gives the value for the input.
this.name gives the name of the option group.

Answer 4

I think something like this should do it.

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

友情链接