How to continue perform click event in jQuery?

Question

first time, On page load, I click on deluxe and the click event was successful. However, after I click on another option and again click on the deluxe option, the click event was not successful.

How do I get it to work ?

Here is my code :

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

_how to call click event work continue_ Couldn't get you? – palaѕн Jun 19 '13 at 06:26 — palaѕн, Jun 19 '13 at 06:26

score 2 · Answer 1 · edited May 23 '17 at 12:29

Try using .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);
    });
});

Demo: Fiddle

also see this

score 2 · Accepted Answer · answered Jun 19 '13 at 07:37

use .prop() instead of .attr().

the reason behind why attr() is not working is,

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior.

so, As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

and your final code will be,

$("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);
});

How to continue perform click event in jQuery?

2 Answers2