Unselect group of radio buttons using jQuery

S

11

12

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?

Soupy answered 12/8, 2011 at 17:56 Comment(0)

D

11

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

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

Dolichocephalic answered 5/9, 2012 at 17:8 Comment(1)

Good discussion of jQuery's prop() here – Goethe 22/9, 2012 at 0:37

S

9

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

Salleysalli answered 12/8, 2011 at 18:1 Comment(3)

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? – Soupy 12/8, 2011 at 18:32

just try changing the selector. something like $("input[name='thename']") – Salleysalli 12/8, 2011 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) – Spotless 10/4, 2022 at 1:45

I

6

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

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

Irrelevancy answered 12/8, 2011 at 18:0 Comment(2)

This worked whe I added one more single quote after the close bracket --- $('input[type="radio"]').prop('checked', false); – Lafollette 4/12, 2013 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. – Irrelevancy 4/12, 2013 at 20:34

N

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);

Nobility answered 11/9, 2019 at 10:31 Comment(0)

S

2

The answer posted by @matzahboy worked perfectly.

Tried other ways but this one worked the best:

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

Stoichiometric answered 18/8, 2013 at 23:5 Comment(0)

Y

1

Try the following code:

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

Yachting answered 12/8, 2011 at 18:0 Comment(1)

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

M

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

Merchandising answered 19/12, 2016 at 4:16 Comment(0)

M

1

it worked for me;

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

Mossy answered 18/7, 2017 at 18:31 Comment(0)

S

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.

Salinasalinas answered 12/2, 2015 at 22:38 Comment(0)

W

0

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

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

Woodhouse answered 4/11, 2015 at 11:57 Comment(0)

Y

0

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>

Yacano answered 24/3, 2023 at 2:18 Comment(1)

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Piapiacenza 28/3, 2023 at 17:20

Recommended topics

Hot tags