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”添加到开关div。在jquery中是否有任何选择器可用于获取特定输入的已检查状态？（页面上有多个。）

感谢您的头脑风暴！

Answer 1

This works;您需要在输入中添加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" />

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

3 个答案: