Monday, January 27, 2014

Select only one checkbox at a time from the list of checkboxes using JQuery

Here i have created three checkbox named 1,2,3. When we click a checkbox, the name property of the current checkbox is retrived and checked using JQuery is() function and all other checkbox are unchecked using JQuery not() function.
HTML Code:
<input type="checkbox" name="fruits">1</input>
<input type="checkbox" name="fruits">2</input>
<input type="checkbox" name="fruits">3</input>

JQuery Code:
$(':checkbox').on('change',function(){
 var thiscb = $(this);
 var name = thiscb.prop('name');
 if(thiscb.is(':checked'))
 {
     $(':checkbox[name="'  + name + '"]').not($(this)).prop('checked',false);  
  }
});

Demo:

Click Here for Demo

No comments:

Post a Comment