Reset radio button and checkbox value in js

Question

I have a set of radio buttons and one of them is checked like this.

<input name="test_data" type="radio" value='1' id="test_data">
<input name="test_data" type="radio" value='2' id="test_data" checked="checked">
<input name="test_data" type="radio" value='3' id="test_data">
<input name="test_data" type="radio" value='4' id="test_data">

I have a link like this

<a href="#" id="resetvalue">reset value</a>

How can I reset the radio button value when the user clicks on the resetvalue id. I am not using any form. If there is a form and button we can easily do for that using reset property.

Hunter Turner · Answer 1 · 2016-08-24T21:50:43.843

2

You could do something like this:

jQuery

$('#resetvalue').click(function() {
  $('input[name="test_data"]:nth-of-type(2)').prop('checked', true);
});

This resets the radio button back to the second value using the :nth-of-type() selector.

JSFiddle

edited Aug 24 '16 at 21:50

answered Aug 24 '16 at 21:40

Hunter Turner

6,804
11
41
56

Might want to add this `$('input[value="2"]').prop('checked', true);` to "reset" it back to the original – Adam Buchanan Smith Aug 24 '16 at 21:45
my problem is when I click the resetvalue I need to go to previous value that is the second item should be checked. – sudar Aug 24 '16 at 21:46
@samunp, updated. Should work properly now. – Hunter Turner Aug 24 '16 at 21:55

score 1 · Answer 2 · answered Aug 24 '16 at 21:47

This is how you do it https://jsfiddle.net/0vLmt3L5/7/

$('#resetvalue').click(function() {
  $('input[value="2"]').prop('checked', true);
});

This will set it back to the original checked radio button, and yes I took Hunter's fiddle and just added

this:$('input[value="2"]').prop('checked', true);

instead of this: $('input[name="test_data"]').prop('checked', false);

score 0 · Answer 3 · answered Aug 24 '16 at 21:40

0

$("#resetvalue").on("click",function(e){

    $("input[type='radio']").removeAttr("checked");

});

answered Aug 24 '16 at 21:40

Maciej Sikora

19,374
4
49
50

score 0 · Answer 4 · answered Aug 24 '16 at 21:56

$( '#resetvalue' ).click(function() {
    $( '[name="test_data"].checked' ).prop('checked', false);
    // Set eq from 0 (first radio) to value you want
    $( '[name="test_data"]' ).eq(0).prop('checked', true);
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="test_data" type="radio" value='1' id="test_data">
    <input name="test_data" type="radio" value='2' id="test_data" checked="checked">
    <input name="test_data" type="radio" value='3' id="test_data">
    <input name="test_data" type="radio" value='4' id="test_data">

<a href="#" id="resetvalue">Reset</a>

Reset radio button and checkbox value in js

4 Answers4