Question

I have this basic HTML structure:

<fieldset>
    <input/>
    <label></label>
    <div class="toggle_box">
        <div class="switch"></div>
    </div>
</fieldset>

I would like this to happen when my input is checked:

<fieldset>
    <input checked="checked" />
    <label></label>
    <div class="toggle_box">
        <div class="switch" state="on"></div>
    </div>
</fieldset>

Add state=”on” to the switch div. Is there any selector in jquery I can use to get the checked state of that particular input? (there are multiple on a page).

Thanks for your brainstorming!

Answer 1

This works; you’ll need to add type="checkbox" to your inputs to make them checkboxes. (Observe the effect by inspecting the switch divs with Chrome’s Dev Tools or Firebug.)

$('fieldset input[type=checkbox]').change(function() {
    var el=$(this).parent().find('.switch');
    if ($(this).is(':checked')) el.attr('state','on');
    else el.removeAttr('state');
});