Checkbox appear when certain radio selected

Question

                    <label class="radio inline">
                        <input type="radio" name="drivesize" id="drivesize" value="250 GB" required>250GB
                    </label>

                    <label class="radio inline">
                        <input type="radio" name="drivesize" id="drivesize" value="500 GB">500GB
                    </label>

I have the above bit of html in my webpage and I'd like to add the following if the 500GB radio button is selected.

                    <label class="checkbox inline">
                        <input type="checkbox" name="mappings" id="mappings" value="Done" required>Done
                    </label>

Can anybody tell me the best to do this?

Just use javascript or jquery and do something like (if radiobutton id is equal to [value]) then display the div that contains what you want. You can refer this answer either: http://stackoverflow.com/questions/901712/check-checkbox-checked-property-using-jquery — Nick, Oct 23 '14 at 13:30

score 0 · Accepted Answer · answered Oct 23 '14 at 13:40

Just a note: you should not use duplicate IDs (see #drivesize). IDs should be unique while classes can be reused. If you change your IDs, it can be easier to check.

Here's a bit of jQuery that should allow you to check for if the box is checked. We will assume that you changed the 500GB ID to largeDrive, the Done button is hidden from view, and you have an event handler on the radio buttons.

if ($('input#largeDrive').is(':checked')) {
    $('input#mappings').show(); //assuming it was hidden
}

Checkbox appear when certain radio selected

1 Answers1