CODEWITHSUNDEEP
javascriptjquery
Michael Ngooi
Michael Ngooi

Reputation: 131

jquery how to uncheck radio button

I was trying to solve this problem, but my reset button just can't uncheck the radio button..... :( Hope experts here can help me to solve my problem. Thx!!!!

just created the fiddle http://jsfiddle.net/8GLPC/

<input type="radio" class="radio" name="r[][9]" id="id_19" value="1|9">
                                <label for="id_19">Choice 1</label>
<input type="radio" class="radio" name="r[][9]" id="id_29" value="2|9">
                                <label for="id_29">Choice 1</label>
<button class="reset1" value="9">Reset</button>


$(document).ready(function(){
    $(".radio")
        .button();

    $(".reset1")
        .button()
        .click(function(){
            var radio = $('[name="r[][9]"]');
            radio.prop('checked',false);
            return false;
        })
});

Upvotes: 1

Views: 5446

Answers (2)

Ariana Lynn
Ariana Lynn

Reputation: 1

Try this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>

<h3>A demonstration of how to uncheck a Checkbox</h3>

Checkbox: <input type="checkbox" class="myCheck" checked>
Checkbox2: <input type="checkbox" class="myCheck" >
Checkbox3: <input type="checkbox" class="myCheck" >
<p>Click the "Try it" button to check the checkbox.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
$(".myCheck").prop('checked' , false);
}
</script>

</body>

Basiclly, it unchecks all checkboxes with the class .myCheck

Upvotes: -1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93551

You need to refresh the jQuery button state after changing the underlying radio buttons.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/BPv7F/1/

$(document).ready(function(){
    $(".radio")
        .button();

    $(".reset1")
        .button()
        .click(function(){
            var radio = $('[name="r[][9]"]');
            radio.prop('checked', false).button("refresh");
            return false;
        })
});

jQuery UI Buttons create separate elements, so changing the radio button state has no immediate effect on them.

Reference: http://api.jqueryui.com/button/#method-refresh

If you view the DOM, in say Chrome's F12 DOM inspector, you will see button() creates a LABEL and SPAN preceding each radio button. The actual radio button is styled out with the class ui-helper-hidden-accessible

Upvotes: 6

Related Questions