获取输入的“已检查”状态

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>

将state =“on”添加到switch div。 在jquery中是否有任何选择器可用于获取特定输入的已检查状态？ （页面上有多个）。

谢谢你的头脑风暴！

Answer 1

这有效 ; 您需要在输入中添加type="checkbox"以使其成为复选框。 （通过使用Chrome的Dev Tools或Firebug检查switch div观察效果。）

$('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中，然后使用* document.getElementById *获取父div，在内容中找到您想要的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" />