jquery - Set radio button value in javascript - Stack Overflow

admin管理员组

文章数量:1321074

I am trying to set the value of the radio button via javascript. But I am not being able to do so. What I tried to do was have 4 radio buttons one of which is already selected. If I select some other radio button and click on Refresh, default radio button should be selected.

/

HTML:

<fieldset data-role="controlgroup" data-type="vertical">
    <input type="radio" name="radio" id="x" data-theme="a" />
    <label for="x" style="color: White">X</label>
    <input type="radio" name="radio" id="y" onclick="axisonoff(this)" data-theme="a" />
    <label for="y" style="color: White">Y</label>
    <input type="radio" name="radio" id="z" data-theme="a" />
    <label for="z" >Z</label>
    <input type="radio" name="radio" id="none" data-theme="a" />
    <label for="none" style="color: White">None</label>
</fieldset>


<button id = "Refresh" value="Refresh">Refresh</button>

JS:

$(document).ready(function () {
    $("#none").attr("checked", true).checkboxradio("refresh"); // if this line is not present initially then it works for the 1st refresh. 

});

$("#Refresh").click(function(){
        $("#x").attr("checked", false).checkboxradio("refresh");
        $("#y").attr("checked", false).checkboxradio("refresh");
        $("#z").attr("checked", false).checkboxradio("refresh");
    $("#none").attr("checked", true).checkboxradio("refresh");
});

I am sure that I have missed something very small but not able to figure out why this approach is not working.

Tools used: Javascript,Jquery 1.9 and JQuery mobile 1.3

Thanks,

Deeksha

I am trying to set the value of the radio button via javascript. But I am not being able to do so. What I tried to do was have 4 radio buttons one of which is already selected. If I select some other radio button and click on Refresh, default radio button should be selected.

http://jsfiddle/ds345/Un8XK/1/

HTML:

<fieldset data-role="controlgroup" data-type="vertical">
    <input type="radio" name="radio" id="x" data-theme="a" />
    <label for="x" style="color: White">X</label>
    <input type="radio" name="radio" id="y" onclick="axisonoff(this)" data-theme="a" />
    <label for="y" style="color: White">Y</label>
    <input type="radio" name="radio" id="z" data-theme="a" />
    <label for="z" >Z</label>
    <input type="radio" name="radio" id="none" data-theme="a" />
    <label for="none" style="color: White">None</label>
</fieldset>


<button id = "Refresh" value="Refresh">Refresh</button>

JS:

$(document).ready(function () {
    $("#none").attr("checked", true).checkboxradio("refresh"); // if this line is not present initially then it works for the 1st refresh. 

});

$("#Refresh").click(function(){
        $("#x").attr("checked", false).checkboxradio("refresh");
        $("#y").attr("checked", false).checkboxradio("refresh");
        $("#z").attr("checked", false).checkboxradio("refresh");
    $("#none").attr("checked", true).checkboxradio("refresh");
});

I am sure that I have missed something very small but not able to figure out why this approach is not working.

Tools used: Javascript,Jquery 1.9 and JQuery mobile 1.3

Thanks,

Deeksha

• javascript
• jquery
• html
• jquery-mobile

Share Improve this question Follow edited Oct 15, 2013 at 14:49 James Donnelly 129k3535 gold badges214214 silver badges223223 bronze badges asked Apr 17, 2013 at 13:00 ds345ds345 73733 gold badges88 silver badges1717 bronze badges 8

• 2 I believe the checked value is <div checked="checked">, not true or false - so you want to use $('#x').prop("checked", "checked") – user571545 Commented Apr 17, 2013 at 13:06
• @jqueryrocks–there is no checked attribute for div elements. There is a checked attribute for radio buttons and checkboxes. It's a boolean attribute that has no value. – RobG Commented Apr 17, 2013 at 13:16
• Not sure why I used a div there - <input checked="checked">, not <div> – user571545 Commented Apr 17, 2013 at 13:16
• @jqueryrocks - nope, .prop("check",true); sets it, false unsets it. - and it is for radio buttons of course. - that attr() would get the text value of the original which would NOT be the same as the property. – Mark Schultheiss Commented Apr 17, 2013 at 13:17
• NOTE: do NOT do .removeProp('checked') as that would prevent resetting the property - use the true/false. – Mark Schultheiss Commented Apr 17, 2013 at 13:20

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 5

You should use prop over attr when dealing with boolean attributes.

.attr("checked", false) will add checked="false" to your element.
In HTML, <input checked="false" .../> is the same as <input checked="true" .../> or simply <input checked .../> as the attribute simply needs to be present on the element for it to be active.
See this JSFiddle example.

Change your code to use .prop() instead:

$("#none").prop("checked", false)...

Here is a fixed version of your JSFiddle demo: http://jsfiddle/Un8XK/8/

What you have missed is that there is no need for script. Simply use a form with a reset button:

<form>
  <input type="radio" name="radio" value="0" checked>0<br>
  <input type="radio" name="radio" value="1">1<br>
  <input type="radio" name="radio" value="2">2<br>
  <input type="radio" name="radio" value="3">3<br>
  <input type="reset">
</form>   

If you really must use script, you can simply return the radio buttons to their default by adding a button to the form:

<input type="button" onclick="reset(this.form.radio);" value="Script reset">

and a function:

<script>
function reset(els) {
    for (var i=0, iLen=els.length; i<iLen; i++) {
        els[i].checked = els[i].defaultChecked;
    }
}
</script>

本文标签： jquerySet radio button value in javascriptStack Overflow