Friday, February 4, 2011

Using JQuery, what is the best way to set onclick event listeners for radio buttons?

For the following HTML:

<form name="myForm">
 <label>One<input  name="area"  type="radio" value="S"  /></label>
 <label>Two<input name="area"   type="radio" value="R" /></label>
 <label>Three<input name="area"   type="radio" value="O" /></label>
 <label>Four<input name="area" type="radio" value="U" /></label>
</form>

Changing from the following javascript code:

$(function() {
 var myForm = document.myForm ;
 var radios = myForm.area ;
// Loop through radio buttons
 for (var i=0; i<radios.length; i++) {
if (radios[i].value == "S") {
radios[i].checked = true ;  // Selected when form displays
radioClicks() ;                         // Execute the function, initial setup
}
 radios[i].onclick = radioClicks ;  // Assign to run when clicked
 }  
 });

Thanks

EDIT: The response I selected answers the question I asked, however I like the answer that uses bind() because it also shows how to distinguish the group of radio buttons

  • $(function() {
        $('input[@type="radio"]').click(radioClicks);
    });
    
  • $(function() {
    
      $("form#myForm input[type='radio']").click( fn );
    
    });
    
    function fn()
    {
       //do stuff here
    }
    
  • I think something like this should work (but it's untested):

    $("input[@type='radio']").each(function(i) {
        if (this.val() == 'E') {
            radioClicks();
            this.get().checked = true;
        }
    }
    $("input[@type='radio']").click(radioClicks);
    
    From pix0r
  • $(function() {
        $('#myForm :radio').each(function() {
            if ($(this).value == 'S') {
                $(this).attr("checked", true);
                radioClicks();
            }
    
            $(this).click(radioClicks);
        });
    });
    
  • $( function() {
        $( "input:radio" ).click( radioClicks ).filter( "[value='S']" ).attr( "checked", "checked" );
    } );
    
    From Juan
  •   $( document ).ready( function() { 
    
          $( "input[name='area']" ).bind( "click", radioClicks )
    
      });
    
      function radioClicks()
      {
          alert( $( this ).val() );
      }
    

    I like to use bind() instead of directly wiring the event handler because you can pass additional data to the event hander (not shown here but the data is a third bind() argument) and because you can easily unbind it (and you can bind and unbind by group--see the JQuery docs).

    http://docs.jquery.com/Events/bind#typedatafn

    rp

    From rp

0 comments:

Post a Comment