Question

第一次，在页面加载时，我点击deluxe，点击事件成功。但是，在我单击另一个选项并再次单击deluxe选项后，单击事件未成功。

如何让它发挥作用？

这是我的代码：

<!doctype html>
<html>
<head>
    <title>A Basic Form</title>
    <script type="text/javascript" src="scripts/jquery-1.10.1.min.js">
    </script>
</head>
<body>
    <h1>
        A Basic Form</h1>
    <hr>
    <form action="#">
    <fieldset>
        <legend>Car Trim and Package Information</legend>
        <div class="form-field">
            <div>
                Package:
            </div>
            <input id="plain" type="radio" name="trim" value="plain">
            <label for="plain">
                Plain</label>
            <input id="deluxe" type="radio" name="trim" value="deluxe">
            <label for="deluxe">
                Deluxe</label>
            <input id="custom" type="radio" name="trim" value="custom">
            <label for="custom">
                Custom</label>
        </div>
        <div class="form-field">
            <div>
                Extra Options:</div>
            <input type="checkbox" id="foglights" name="option" value="foglights">
            <label for="foglights">
                Fog Lights</label>
            <input type="checkbox" id="leather" name="option" value="leather">
            <label for="leather">
                Leather</label>
            <input type="checkbox" id="dvd" name="option" value="dvd">
            <label for="dvd">
                DVD</label>
        </div>
        <div class="form-field">
            <input id="submit" type="submit" name="submit" value="Send Form">
        </div>
    </fieldset>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            $("input[name='trim']").click(function (event) {
                if ($(this).val() == "deluxe") {
                    $("input[name='option']").attr("checked", true);
                } else if ($(this).val() == "plain") {
                    $("input[name='option']").attr("checked", false);
                }
            });
            $("input[name='option']").click(function (event) {
                $("#custom").attr("checked", "checked");
            });
        });
    </script>
</body>
</html>

Answer 1

尝试使用.prop()

$(document).ready(function() {
    $("input[name='trim']").click(function(event) {
        if ($(this).val() == "deluxe") {
            $("input[name='option']").prop("checked",true);
        } else if ($(this).val() == "plain") {
            $("input[name='option']").prop("checked",false);
        }
    });
    $("input[name='option']").click(function(event) {
        $("#custom").prop("checked", true);
    });
});

演示：Fiddle

也see this

Answer 2

使用.prop()代替.attr()。

attr()无效的原因是，

在特定情况下，属性和属性之间的差异非常重要。在 jQuery 1.6 之前，.attr()方法在检索某些属性时有时会考虑属性值，这可能会导致行为不一致。

所以，从 jQuery 1.6 开始，.prop()方法提供了一种显式检索属性值的方法，而.attr()检索属性。

，您的最终代码将是，

$("input[name='trim']").click(function (event) {
    if ($(this).val() == "deluxe") {
        $("input[name='option']").prop('checked', true);
    } else if ($(this).val() == "plain") {
        $("input[name='option']").prop('checked', false);
    }
});
$("input[name='option']").click(function (event) {
    $("#custom").prop('checked', true);
});

如何在jQuery中继续执行click事件？

2 个答案: