Cannot reset radio button in jquery

Question

I am writing a web page for the mobile use, and I add a reset button to reset radio button but it not work. I have try to solve in many way, like

$('select#qty1 option').attr('selected', false);

$('select#qty1 option').removeAttr('selected');

$('select#qty1').children('option').removeAttr('selected').filter(':nth-child(1)').attr('selected', true);

$('select#qty1').attr('selectedIndex', -1);

but all of them do not work.

Radio button

<tr>
    <td><a href='#myPopup' data-rel='popup' class='ui-btn ui-shadow ui-corner-all ui-icon-info ui-btn-icon-notext' data-position-to='window'>info</a></td>
    <td>Pizza</td>
    <td>$100</td>
    <td>

        <select type='radio' data-native-menu='false' name='qty1' id='qty1'>

            <option value='0'>0</option>
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
            <option value='4'>4</option>
            <option value='5'>5</option>

        </select>
    </td>

</tr>

Reset button

<input id="reset1" type="button" value="Reset">

script

$("#reset1").click(function(){
    $('select#qty1').attr('selectedIndex', -1);
});

If you can make the inputs part of an actual form element, using `` will reset them automatically, without any JavaScript. And yes, that's a select element, not a radio button. — Felix Kling, Mar 13 '14 at 18:35
You should be doing `$('#qty1 option').prop('selected', false);` — adeneo, Mar 13 '14 at 18:35

score 1 · Answer 1 · answered Mar 13 '14 at 18:46

1

there is no input type like that.
```
<select type='radio'>
```
there is no "selected" attribute in radio button. use "checked".
you can reset radio buttin by " input reset".
```
<input type="reset" />
```

answered Mar 13 '14 at 18:46

mockie

175
1
2
12

score 0 · Answer 2 · answered Mar 13 '14 at 18:34

0

You mention a radio button but you are using a select box.

Try this

$('#qty1 option:selected').removeAttr('selected');

You need to specify the selected option.

answered Mar 13 '14 at 18:34

Cjmarkham

9,484
5
48
81

None of the options has such an attribute though. – Felix Kling Mar 13 '14 at 18:35
It will do when it has been selected – Cjmarkham Mar 13 '14 at 18:36
So, why does `$('select#qty1 option').removeAttr('selected');` "not work" then? (since `select#qty1 option` is a superset of `#qty1 option:selected`) – Felix Kling Mar 13 '14 at 18:36
That also works fine [see this fiddle](http://jsfiddle.net/kw8B6/) – Cjmarkham Mar 13 '14 at 18:38
It seems like jQuery does indeed treat `removeAttr('selected')` in a special way. But I think we have a different understanding what "reset" means. I understand it that the default value should be selected again. Your code instead will always select the first option, no matter which one was the default option: http://jsfiddle.net/kw8B6/1/ – Felix Kling Mar 13 '14 at 18:42

Fabian De Leon · Answer 3 · 2014-03-13T22:46:01.853

0

this work.

$("#reset1").click(function(){ $('select[id=qty1] option[value=0]').attr('selected', 'selected'); });

edited Mar 13 '14 at 22:46

answered Mar 13 '14 at 18:46

Fabian De Leon

124
4

Cannot reset radio button in jquery

3 Answers3