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



Question:

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


Solution:1

$( function() {      $("input:radio")          .click(radioClicks)          .filter("[value='S']")          .attr("checked", "checked");  });  


Solution:2

$(document).ready(function(){      $("input[name='area']").bind("click", radioClicks);  });    functionradioClicks() {      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


Solution:3

$(function() {      $("form#myForm input[type='radio']").click( fn );    });    function fn()  {     //do stuff here  }  


Solution:4

$(function() {      $('input[@type="radio"]').click(radioClicks);  });  


Solution:5

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);  


Solution:6

$(function() {      $('#myForm :radio').each(function() {          if ($(this).value == 'S') {              $(this).attr("checked", true);              radioClicks();          }            $(this).click(radioClicks);      });  });  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »