Javascript / JQuery Deselecting radio buttons

Question

I have the following javascript that I want to use to allow the user to deselect a selected radio button by clicking it. (I know this is not standard, but it is required by the system :)

DeselectRadioButton = { setup: function () { $(".deselectRadioButton").click(function () { if ($(this).is(':checked')) { alert("I am checked!"); ($(this).removeAttr('checked')); } }); } }; 

My problem is that when I select an unselected radio button, it immediately cancels it after a warning appears.

I suppose I get this event after the item has changed - how can I fix this code to disable the radio button selection?

Thanks!

Answer 1

However, the main problem is that when I select the unselected radio button, it immediately cancels it after the notification.

It seems you cannot prevent the default behavior of the switch using return false or e.preventDefault() , since the switch is always checked when the click handler starts. One way is to add a separate class to the switch and use it as an indicator.

 $(".deselectRadioButton").click( function(e){ if($(this).hasClass("on")){ $(this).removeAttr('checked'); } $(this).toggleClass("on"); }).filter(":checked").addClass("on"); 

Sample jsfiddle code.

Answer 2

One of the problems I discovered with this is the switch groups. The presented solutions work fine for one switch, but in groups I ran into a problem when deselecting one of them and then trying to select another failed (until the second click).

I just found a solution here that works fine:

 var allRadios = $('input[type=radio]') var radioChecked; var setCurrent = function(e) { var obj = e.target; radioChecked = $(obj).attr('checked'); } var setCheck = function(e) { if (e.type == 'keypress' && e.charCode != 32) { return false; } var obj = e.target; if (radioChecked) { $(obj).attr('checked', false); } else { $(obj).attr('checked', true); } } $.each(allRadios, function(i, val){ var label = $('label[for=' + $(this).attr("id") + ']'); $(this).bind('mousedown keydown', function(e){ setCurrent(e); }); label.bind('mousedown keydown', function(e){ e.target = $('#' + $(this).attr("for")); setCurrent(e); }); $(this).bind('click', function(e){ setCheck(e); }); }); 

Answer 3

to try:

 $(this).removeAttr('checked'); 

Answer 4

I experienced the same problem that David described using groups of radio buttons. Here's another way around this problem (based on Mark's solution) that works for multiple groups of radio buttons on the same page:

 $(":radio").click( function(e){ var itsOn = $(this).hasClass("on"); $(":radio[name="+ this.name + "]").removeClass("on"); if(itsOn){ $(this).removeAttr('checked'); $(this).siblings().filter("[value='']").attr('checked', true); } else { $(this).addClass("on"); } }).filter(":checked").addClass("on"); 

Answer 5

Are you sure nothing will go wrong with him?

I tried this code and it works:

HTML

 <ul> <li> <input id="one" name="value" type="radio"> <label for="one">One</label> </li> <li> <input id="two" name="value" type="radio"> <label for="two">Two</label> </li> <li> <input id="three" name="value" type="radio"> <label for="three">Three</label> </li> </ul> 

Javascript

 $("input[type='radio']").click(function(event) { // If the button is selected. if ($(this).hasClass("checked")) { // Remove the placeholder. $(this).removeClass("checked"); // And remove the selection. $(this).removeAttr("checked"); // If the button is not selected. } else { // Remove the placeholder from the other buttons. $("input[type='radio']").each(function () { $(this).removeClass("checked"); }); // And add the placeholder to the button. $(this).addClass("checked"); } }); 

You can test it here .