Получить «проверенное» состояние входа

Question

У меня есть такая базовая структура HTML:

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

Я бы хотел, чтобы это происходило при проверке моего ввода:

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

Добавить состояние = "вкл" к переключателю div. Есть ли селектор в jquery, который я могу использовать, чтобы получить проверенное состояние этого конкретного ввода? (на странице несколько).

Спасибо за ваш мозговой штурм!

Answer 1

Это работает ;вам нужно добавить type="checkbox" к вашим входам, чтобы сделать их флажками.(Наблюдайте за эффектом, осматривая switch div s с помощью Chrome Dev Tools или 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');
});

Answer 2

Вы можете поместить все эти div в другой div, а затем получить div отца с помощью * document.getElementById *, найти нужный div в содержимом и изменить его.

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

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

Answer 3

Это сделает это за вас.

$('input:checkbox').change(function () {
    if ($(this).is(':checked')) {
        $(this).parent().children('div.toggle_box').children('div.switch').attr('state', 'on');
    } else {
        $(this).parent().children('div.toggle_box').children('div.switch').removeAttr('state');
    }
});

Вам также придется изменить <input /> на <input type="checkbox" />