Unselect group of radio buttons using jQuery

Question

I'm using jQuery and I have a group of radio buttons all with the same name, but different value properties.

For example:

<input type = "radio" name = "thename" value="1"></input>
<input type = "radio" name = "thename" value="2"></input>
<input type = "radio" name = "thename" value="3"></input>

I want to make it so they are all unselected. Current state of my page has one of them clicked. How do I do this?

score 11 · Answer 1 · answered Sep 05 '12 at 17:08

11

$("input:radio[name='thename']").each(function(i) {
       this.checked = false;
});

not sure why the jquery prop doesn't work and this does...

answered Sep 05 '12 at 17:08

Bogdan M

121
1
7

Good discussion of [jQuery's `prop()` here](http://stackoverflow.com/a/5876747/557612) – steveax Sep 22 '12 at 00:37

score 9 · Answer 2 · answered Aug 12 '11 at 18:01

9

As of jQuery 1.6, $("radio").prop("checked", false); is the suggested method.

answered Aug 12 '11 at 18:01

Dave Kiss

10,289
11
53
75

1

sorry, this doesn't work for me. I tried it. Also, what if I had other radio elements on the page and I didn't want to apply that behavior to them? – Carl Aug 12 '11 at 18:32
3

just try changing the selector. something like `$("input[name='thename']")` – Dave Kiss Aug 12 '11 at 19:18
I agree this just plain doesn't work, my (hidden) radio button doesn't get unselected (the chosen result is still passed in the form) – user1111929 Apr 10 '22 at 01:45

Kyle · Answer 3 · 2013-12-04T20:33:45.477

6

Try using this: $('input[type="radio"]').prop('checked', false);

Using jQuery's prop method can change properties of elements (checked, selected, ect.).

edited Dec 04 '13 at 20:33

answered Aug 12 '11 at 18:00

Kyle

4,421
22
32

This worked whe I added one more single quote after the close bracket --- $('input[type="radio"]').prop('checked', false); – Jim Evans Dec 04 '13 at 18:58
@JimEvans Thank you. I'm not sure why I haven't seen that until now. I have edited the answer to have the closing quote. – Kyle Dec 04 '13 at 20:34

score 4 · Answer 4 · edited Sep 11 '19 at 11:02

4

This is simple and works for me.

Try this one:

$('input:radio[name="gender"]').attr('checked',false);

Try this one:

$('input[name="gender"]').prop('checked', false);

edited Sep 11 '19 at 11:02

tituszban

4,797
2
19
30

answered Sep 11 '19 at 10:31

Rakhal Raj Mandal

41
1

score 2 · Answer 5 · edited Aug 18 '13 at 23:32

2

The answer posted by @matzahboy worked perfectly.

Tried other ways but this one worked the best:

$(input[name=thename]).removeAttr('checked');

edited Aug 18 '13 at 23:32

Paulo Tomé

1,910
3
18
27

answered Aug 18 '13 at 23:05

viniciusalvess

756
8
18

score 1 · Answer 6 · answered Dec 19 '16 at 04:16

1

This is the simple and generic answer (I believe): $("input[name=NAME_OF_YOUR_RADIO_GROUP]").prop("checked",false);

For this specific question, I would use:

$("input[name=thename]").prop("checked",false);

Hope this helps

answered Dec 19 '16 at 04:16

JimmyH

11
1

score 1 · Answer 7 · answered Jul 18 '17 at 18:31

1

it worked for me;

$('input[name="radioName"]').attr('checked', false);

answered Jul 18 '17 at 18:31

Baqer Naqvi

6,011
3
50
68

score 1 · Answer 8 · answered Aug 12 '11 at 18:00

1

Try the following code:

$(input[name=thename]).removeAttr('checked');

answered Aug 12 '11 at 18:00

matzahboy

3,004
20
25

Didn't work, but both of these did: $("input:radio[name='thename']").removeAttr('checked'); $("[name='thename']").removeAttr('checked'); The surrounding ticks are optional. – Loren Sep 11 '19 at 14:58

score 0 · Answer 9 · edited Feb 12 '15 at 22:58

0

function resetRadio(name) {
    $('#form input:radio[name=' + name + ']:checked').each(function () {
        var $this = $(this);
        $this.prop("checked", false);
    });
}

$('#form input:radio').on('dblclick', function () {
    var $this = $(this);
    var name = $this.prop('name');
    resetRadio(name);
});

This allows you to double click the radios to reset them.

edited Feb 12 '15 at 22:58

davidism

121,510
29
395
339

answered Feb 12 '15 at 22:38

Pablo Uribe A.

1

score 0 · Answer 10 · answered Nov 04 '15 at 11:57

0

To unselect all the radios of a group called "namegroup", try this:

$("input[type=radio][name=namegroup]").prop("checked", false);

answered Nov 04 '15 at 11:57

nonide

1

XRT-NoOne · Answer 11 · 2023-03-29T01:32:56.060

After clicking the uncheck and disabled radio button it will run the onchange function that will trigger the uncheck and disabling of the radio button, using each it will iterate the index of the radio button under the input name = 'radio-test-name' after that it will get the properties of the radio button and you can now set the properties adding to 'this' and setting it to true or false. I hope it will help, thanks!

$('input[name="radio-choices"]').change(function() {
  let currentValue = $(this).val();
  if (currentValue == 'choices1') {
    $("input[name='radio-test-name']").each(function(i) {
      this.checked = false;
      this.disabled = true;
    });
  } else {
    $("input[name='radio-test-name']").each(function(i) {
      this.disabled = false;
    });
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<title> Uncheck radio button
</title>

<body>
  <input type="radio" name="radio-choices" value="choices2" id="choices2" checked><label for="choices2">Can pick</label>
  <input type="radio" name="radio-choices" value="choices1" id="choices1"><label for="choices1">Uncheck and disabled</label>
  <br>
  <input type="radio" name="radio-test-name" id="test1"><label for="test1">TEST1</label>
  <input type="radio" name="radio-test-name" id="test2"><label for="test2">TEST2</label>
  <input type="radio" name="radio-test-name" id="test3"><label for="test3">TEST3</label>
</body>

</html>

Your answer could be improved by adding more information on what the code does and how it helps the OP. — Tyler2P, Mar 28 '23 at 17:20

Unselect group of radio buttons using jQuery

11 Answers11

Linked