Tutorial :javascript for radio button list


i have an Radiobutton with (6 items under it). and i have an search button. if user clicks Search button it gets all the result. i am binding the items for Radiobuttonlist using database in .cs file

condition 1: now if user as selected Radiobutton1 [item1] it gets selected. and now if user again clicks on Radiobutton1[item1] then it should get deselected.

how to write an function onclick if here. where i need to check this condition

either you can provide me the solution in javascript or JQuery any help would be great . looking forward for an solution thank you


This should do what you want. Provides enable/disable functionality on every radio-button on the page. You can alter the selector to match only those radios you are interested in.

But I must tell you that enabling/disabling radiobuttons is counter-intuitive. You really should be using checkboxes for that. As e.g. I when using your site wouldn't expect to be able to uncheck a radiobutton as that is uncommon behavior.

$('input[type=radio]').each(function(i,e) {      //save initial state      $(e).data("oldstate", e.checked);  });    $('input[type=radio]').click( function (e) {      var x = $(this);      //if the current state is the same as the saved one toggle      //else don't do anything      if (this.checked == x.data("oldstate"))          this.checked = !(this.checked);      //save current state      x.data("oldstate", this.checked);  });  



<script type="text/javascript">       /* find _all_ input elements,         where the attribute "type" = "radio",         and add an onclick event to them */      $('input[type=radio]').click( function {          $(this).selected = !$(this).selected;          return false;      });  </script>  <input type="radio" id="radio1" name="radiogroup1" />  <input type="radio" id="radio2" name="radiogroup1" />  

This should only get you an idea how you could handle this.

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