SO - 17184241

by Arun P Johny

HTML

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

JavaScript

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