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

发布于 2024-11-07 11:52:32 字数 601 浏览 1 评论 0原文

我有这个基本的 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 中是否有任何选择器可以用来获取该特定输入的选中状态？（一页上有多个）。

感谢您的集思广益！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

剧终人散尽 2024-11-14 11:52:32

这有效；您需要在输入中添加 type="checkbox" 以使它们成为复选框。（通过使用 Chrome 的开发工具或 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');
});

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');
});

回复收藏 0 原文

叫嚣ゝ 2024-11-14 11:52:32

你可以将所有这些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>

You can put all these divs inside another div, and then get the father div with*document.getElementById*, find the div you want in the content and change him.

<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>

回复收藏 0 原文

仙女山的月亮 2024-11-14 11:52:32

这将为您完成它。

$('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');
    }
});

您还必须将修改为

This will accomplish it for you.

$('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');
    }
});

You'll also have to modify your <input /> to <input type="checkbox" />

回复收藏 0 原文

~没有更多了~