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:
  1. <input type="checkbox" name="fruits">1</input>
  2. <input type="checkbox" name="fruits">2</input>
  3. <input type="checkbox" name="fruits">3</input>

JQuery Code:
  1. $(':checkbox').on('change',function(){
  2.  var thiscb = $(this);
  3.  var name = thiscb.prop('name');
  4.  if(thiscb.is(':checked'))
  5.  {
  6.      $(':checkbox[name="'  + name + '"]').not($(this)).prop('checked',false);  
  7.   }
  8. });

Demo:

Click Here for Demo

No comments:

Post a Comment