Question

我在重置单选按钮中有2个问题并检查。

第一期。

我通过此按钮检查或选择（第1行）单选按钮 Check Option 1, Check Option 2, Check Option 3
仅在第一次工作正常，例如，如果我点击按钮Check Option 1, Check Option 2, Check Option 3，它将根据其值正确检查单选按钮。
如果再次单击按钮Check Option 1, Check Option 2, Check Option 3，它将无效。

第二期。

点击Reset button，我需要重置为默认的检查值。例如，见第2行。
如果通过Check Option 1, Check Option 2, Check Option 3进行检查，则重置无效。如果我通过手动检查其工作正常。

但我正在使用$('input[name=rdoSample][value=' + value.Rdovalue + ']').attr('checked', 'checked');，因为我从数据库中获取值，我必须根据其值进行检查。

<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>

Answer 1

使用prop代替attr来更改已检查的属性。

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

Js Fiddle

Answer 2

您应该将.attr("checked",...替换为.prop("checked,...。

有 difference between an attribute and a property 。引用jQuery文档：

尽管如此，要记住关于checked属性的最重要的概念是它与checked属性不对应。该属性实际上对应于defaultChecked属性，应仅用于设置复选框的初始值。 checked属性值不会随复选框的状态而改变，而checked属性则会改变。

所以，使用这样的东西会使一切运转起来：

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

另请参阅此 short demo 。

重置单选按钮并使用jQuery进行检查

2 个答案: