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>

Sachin · Accepted Answer · 2013-06-20 07:27:40Z

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, 2013 at 7:27

Sachin

41.1k7 gold badges94 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lakshmana Kumar Over a year ago

Thanks Sachin. Its working fine. Can u explain y its not working when i used attr.

Sachin Over a year ago

@LakshmanaKumar have a look stackoverflow.com/questions/5874652/prop-vs-attr

gkalpak · Accepted Answer · 2013-06-20 07:45:51Z

1

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.

answered Jun 20, 2013 at 7:45

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Collectives™ on Stack Overflow

Reset radio button and checking using jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related