0

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

我如何让它工作？

这是我的代码：

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

2 回答 2

2

尝试使用.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);
    });
});

演示：小提琴

也看到这个

于 2013-06-19T06:31:50.610 回答
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);
});
于 2013-06-19T07:37:39.667 回答