33

The thing is this solution work only in firefox

$(':radio').on("change", function(event) {
  $(this).prop('checked', true);
});

$(':radio').on("click", function(event) {
  $(this).prop('checked', false);
});

In chrome, it wont allow you to select anything http://jsfiddle.net/wuAWn/

Ofc, i could use variable and write something like

var val = -1;
$(':radio').on("click", function() {
  if($(this).val() == val) {
    $(this).prop('checked', false);
    val = -1;
  }
  else val = $(this).val();
});

But i will have few radio button groups on my page and html content is loaded through ajax, so i would like to wrtite 1 function for all of them, instead of defining variables for every one radio button group and write same function for every radio button group.

Edit: thanks for your help with checkboxes, but for checkboxes to act as a radio button group, you need to write adittional javascrip that will uncheck all other checkboxes with same name onclick, i have already radio button css and its easier for me just to add class like look-like-checkbox and make it look like checkbox, i use uniform library for custom look, anyway here is my weird solution http://jsfiddle.net/wuAWn/9/

Improve this question
4
  • What's missing in this question is what you're trying to achieve.. Disabling the radio checkboxes? then you can use the disabled="disabled" property.. Commented Jun 15, 2013 at 5:45
  • No i dont wat to disable them, i want to create radiobutton group, that allow you deselect already checked. Commented Jun 15, 2013 at 5:45
  • @Especially I'm curious as to why this was marked as a duplicate? This person is asking how to uncheck a checked radio button when it is clicked. This is an entirely different beast that simply unckecking a checkbox. See this fiddle: jsfiddle.net/x48cx Commented Nov 9, 2013 at 0:34
  • 1
    check here this is working in all browser. http://jsfiddle.net/f4vXj/2/ Commented Mar 12, 2014 at 10:47

5 Answers 5

Reset to default
37

This simple script allows you to uncheck an already checked radio button. Works on all javascript enabled browsers.

var allRadios = document.getElementsByName('re');
var booRadio;
var x = 0;
for(x = 0; x < allRadios.length; x++){
  allRadios[x].onclick = function() {
    if(booRadio == this){
      this.checked = false;
      booRadio = null;
    } else {
      booRadio = this;
    }
  };
}
<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This example requires you to click the radio button twice if the page is loaded with the input already checked.
12

Radio buttons are meant to be required options... If you want them to be unchecked, use a checkbox, there is no need to complicate things and allow users to uncheck a radio button; removing the JQuery allows you to select from one of them

Improve this answer

5 Comments

+1, It's much easier to write jquery to limit a set of checkboxes to a max of a certain count (1 in your scenario)
Ofc. i could do that, btu i have already css for radio buttons and for checkboxes to be able to act as radio buttons, i need to write javascript too, altho its not hard, but still, i just wanted to know if this is possible to do without variables or not.
check here this is working in all browser. http://jsfiddle.net/f4vXj/2/
In my scenario if the user answers 'Yes' to Question 1 he then must answer Question 2. If he answers Question 2 then changes his mind to Question 1 I want to uncheck his answer to Question 2 so he can see it has no affect and makes logic easier down the line. Don't assume there is no need to do something just because you don't need to do it.
There is a scenario between the two. A group of checkboxes allows anywhere between zero and all options within the group to be checked. A radio group only allows zero or one, but once you select one there is no way to return to zero. The question, I believe, is how we can allow the user to return to zero radio buttons checked.
8

You might consider adding an additional radio button to each group labeled 'none' or the like. This can create a consistent user experience without complicating the development process.

Improve this answer

4 Comments

It doesn't have to say 'none'. If you want to allow your users to, for example not specify a gender, then you could have a radio button labeled 'unspecified'. Is the behavior you are looking for that clicking an already selected radio button cause it to be unselected?
A selectbox might also be an option. The default being 'unspecified'
On a less technological note: I think you'll find that "none" is a totally valid gender. Unfortunately the needs of user experience often preclude the most politically correct ways to collect demographic data. To use the example of a common use case: it is more challenging to show segmented advertisements based on a free text field than based on a multiple choice, and it's easier if the choices are limited to the most popular ones. You don't want people to opt out of targeted advertising simply by selecting a non-binary gender on your form. Does anyone else ask these questions when they code?
group labeling makes it easy and works for me. thanks.
4

try this

single function for all radio have class "radio-button"

work in chrome and FF

$('.radio-button').on("click", function(event){
  $('.radio-button').prop('checked', false);
  $(this).prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type='radio' class='radio-button' name='re'>
<input type='radio'  class='radio-button' name='re'>
<input type='radio'  class='radio-button' name='re'>

Improve this answer

3 Comments

It wont allow you deselect already selected.
This would be a bad idea if you have multiple radio button groups on the same page.
Seems this solution doesn't work anymore.
0

try this

var radio_button=false;
$('.radio-button').on("click", function(event){
  var this_input=$(this);
  if(this_input.attr('checked1')=='11') {
    this_input.attr('checked1','11')
  } else {
    this_input.attr('checked1','22')
  }
  $('.radio-button').prop('checked', false);
  if(this_input.attr('checked1')=='11') {
    this_input.prop('checked', false);
    this_input.attr('checked1','22')
  } else {
    this_input.prop('checked', true);
    this_input.attr('checked1','11')
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>

Improve this answer

4 Comments

@user2486415 try this ..it's also uncheck
Thanks, its a nice solution, but there is problem, try to click 1,2,3 and then again 1,2,3
@user2486415 now i have update it try again jsfiddle.net/wuAWn/10
Thanks but i need solution without variable, with variable here it is jsfiddle.net/wuAWn/12

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.