How to uncheck checked radio button

Question

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/

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.. — arnorhs, Jun 15 '13 at 05:45
No i dont wat to disable them, i want to create radiobutton group, that allow you deselect already checked. — ccd580ac6753941c6f84fe2e19f229, Jun 15 '13 at 05: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: http://jsfiddle.net/x48cx/ — Pytry, Nov 09 '13 at 00:34
check here this is working in all browser. [http://jsfiddle.net/f4vXj/2/](http://jsfiddle.net/f4vXj/2/) — banny, Mar 12 '14 at 10:47

score 37 · Answer 1 · edited May 19 '18 at 17:44

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'>

edited May 19 '18 at 17:44

Matus Dubrava

13,637
2
38
54

answered Jun 15 '13 at 13:07

Kzest

526
3
4

4

This example requires you to click the radio button twice if the page is loaded with the input already checked. – Mike Richards Jan 10 '17 at 19:19

score 12 · Answer 2 · answered Jun 15 '13 at 05:45

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

answered Jun 15 '13 at 05:45

Brad

417
3
18

2

+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) – Mikhail Jun 15 '13 at 05:47
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. – ccd580ac6753941c6f84fe2e19f229 Jun 15 '13 at 05:49
5

check here this is working in all browser. [http://jsfiddle.net/f4vXj/2/](http://jsfiddle.net/f4vXj/2/) – banny Mar 12 '14 at 10:50
4

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. – RyanfaeScotland Sep 08 '14 at 14:34
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. – Jacob Ford Sep 19 '16 at 18:08

score 8 · Answer 3 · answered Jun 15 '13 at 06:23

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.

answered Jun 15 '13 at 06:23

olleicua

2,039
2
21
33

1

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? – olleicua Jun 15 '13 at 07:26
1

A selectbox might also be an option. The default being 'unspecified' – Hashbrown Jun 01 '16 at 04:43
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? – olleicua Jun 03 '16 at 15:15
group labeling makes it easy and works for me. thanks. – Aryan Firouzian Jan 16 '19 at 09:53

score 4 · Answer 4 · edited May 19 '18 at 17:47

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'>

edited May 19 '18 at 17:47

Matus Dubrava

13,637
2
38
54

answered Jun 15 '13 at 06:13

sangram parmar

8,462
2
23
47

3

It wont allow you deselect already selected. – ccd580ac6753941c6f84fe2e19f229 Jun 15 '13 at 06:15
This would be a bad idea if you have multiple radio button groups on the same page. – olleicua Oct 09 '16 at 04:57
Seems this solution doesn't work anymore. – Vyshnia May 06 '18 at 14:56

score 0 · Answer 5 · edited May 19 '18 at 17:49

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'>

edited May 19 '18 at 17:49

Matus Dubrava

13,637
2
38
54

answered Jun 15 '13 at 06:33

sangram parmar

8,462
2
23
47

@user2486415 try this ..it's also uncheck – sangram parmar Jun 15 '13 at 06:38
Thanks, its a nice solution, but there is problem, try to click 1,2,3 and then again 1,2,3 – ccd580ac6753941c6f84fe2e19f229 Jun 15 '13 at 06:47
1

@user2486415 now i have update it try again http://jsfiddle.net/wuAWn/10/ – sangram parmar Jun 15 '13 at 06:53
Thanks but i need solution without variable, with variable here it is http://jsfiddle.net/wuAWn/12/ – ccd580ac6753941c6f84fe2e19f229 Jun 15 '13 at 07:08

How to uncheck checked radio button

5 Answers5

Linked

Related