Reset radio button and checking using jQuery

Question

Im having 2 issue in reset radio button and check.

1 st Issue.

I check or select the (1st row) radio button through this buttons Check Option 1, Check Option 2, Check Option 3
Its working fine for 1st time only, For example if i click the button Check Option 1, Check Option 2, Check Option 3 it will check radio button correctly according to its value.
If again i click the button Check Option 1, Check Option 2, Check Option 3 its not working.

2 nd Issue.

I need to reset to its default checked value by clicking Reset button. For example see 2nd row.
Reset is not working if i checked it through Check Option 1, Check Option 2, Check Option 3. If i checked through manually its working fine.

But im using $('input[name=rdoSample][value=' + value.Rdovalue + ']').attr('checked', 'checked'); because im getting value from database and i have to check according to its value.

FIDDLE DEMO

<title>Testing</title>
<script src="scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function() {

        $('#btnReset').click(function() {
            $('input[type=radio]').prop('checked', function() {
                return this.getAttribute('checked') == 'checked';
            });
        });

        $('#btnCheck1').click(function() {
            $('input[name=rdoSample][value="a"]').attr('checked', 'checked');

        });

        $('#btnCheck2').click(function() {
            $('input[name=rdoSample][value="b"]').attr('checked', 'checked');
        });

        $('#btnCheck3').click(function() {
            $('input[name=rdoSample][value="c"]').attr('checked', 'checked');
        });

    });

</script>

<div>
    <table cellpadding="0" cellspacing="0" border="1">
        <tr>
            <td>
                1)
            </td>
            <td>
                <input type="radio" name="rdoSample" value="a" checked="checked" />
                a
                <input type="radio" name="rdoSample" value="b" />
                b
                <input type="radio" name="rdoSample" value="c" />
                c
            </td>
            <td>
                <input type="button" value="Check Option 1" id="btnCheck1" />
                <input type="button" value="Check Option 2" id="btnCheck2" />
                <input type="button" value="Check Option 3" id="btnCheck3" />
            </td>
        </tr>
        <tr>
            <td>
                2)
            </td>
            <td>
                <input type="radio" name="rdoSample1" value="11" checked="checked" />
                11
                <input type="radio" name="rdoSample1" value="22" />
                22
                <input type="radio" name="rdoSample1" value="33" />
                33
            </td>
        </tr>
        <tr>
            <td colspan="3" align="center">
                <input type="button" value="Reset" id="btnReset" />
            </td>
        </tr>
    </table>
</div>

score 4 · Accepted Answer · answered Jun 20 '13 at 07:27

4

use prop instead of attr to change the checked property like this.

$('input[name=rdoSample][value="a"]').prop('checked', 'checked');

Js Fiddle

answered Jun 20 '13 at 07:27

Sachin

40,216
7
90
102

Thanks Sachin. Its working fine. Can u explain y its not working when i used `attr`. – Lakshmana Kumar Jun 20 '13 at 07:36
1

@LakshmanaKumar have a look http://stackoverflow.com/questions/5874652/prop-vs-attr – Sachin Jun 20 '13 at 07:41

score 1 · Answer 2 · answered Jun 20 '13 at 07:45

You should replace .attr("checked",... with .prop("checked,....

There is a difference between an attribute and a property. Quoting the jQuery docs:

Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does.

So, using something like this, would make everything work:

$("input[name=<name>][value=<value>]").prop(
        "checked", true);

See, also, this short demo.

Reset radio button and checking using jQuery

2 Answers2