CODEWITHSUNDEEP
jqueryradio-button
Carl
Carl

Reputation: 175

Unselect group of radio buttons using jQuery

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?

Upvotes: 12

Views: 29291

Answers (11)

XRT-NoOne
XRT-NoOne

Reputation: 46

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>

Upvotes: 0

Rakhal Raj Mandal
Rakhal Raj Mandal

Reputation: 41

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

Upvotes: 4

Baqer Naqvi
Baqer Naqvi

Reputation: 6504

it worked for me;

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

Upvotes: 1

JimmyH
JimmyH

Reputation: 11

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

Upvotes: 1

nonide
nonide

Reputation: 1

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

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

Upvotes: 0

Pablo Uribe A.
Pablo Uribe A.

Reputation: 1

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.

Upvotes: 0

Kyle
Kyle

Reputation: 4449

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

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

Upvotes: 6

viniciusalvess
viniciusalvess

Reputation: 814

The answer posted by @matzahboy worked perfectly.

Tried other ways but this one worked the best:

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

Upvotes: 2

Bogdan M
Bogdan M

Reputation: 121

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

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

Upvotes: 11

Dave Kiss
Dave Kiss

Reputation: 10485

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

Upvotes: 9

matzahboy
matzahboy

Reputation: 3024

Try the following code:

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

Upvotes: 1

Related Questions