选中复选框后无法显示第一个 div

Question

在选中复选框时，我遇到了在复选框隐藏下面的第一个div。 基本上，该脚本有效，它隐藏了 div，但不是复选框下方的第一个。 jQ 中是否有管理此类操作的函数？

我的脚本包含：

$("div[class=content]").hide();
    $("input[type=checkbox]").click(function(){
        if($(this).is(":checked"))
        {
            $(this).siblings().show();
        }
        else
        {
            $(this).siblings().hide();
        }
    });

还有 HTML 部分：

<form action="" method="post" style="border:1; border-style:solid;">
    <input name="checkbox" id="table" type=checkbox /> a TABLE<br />
        <div class=content id="table">
            COLs <input type=text name=COLs /><br />
            ROWs <input type=text name=ROWs /><br />
            <input type=submit name=submit_table value="create table" />
        </div>
    <br/>
    <br />
    <input name="checkbox" id="image" type=checkbox /> an IMAGE<br />
        <div class=content id="image">
            Width <input type=text name=Width /><br />
            Height <input type=text name=Height /><br />
            <input type=submit name=submit_image value="see image" />
        </div>
    <br />
    <br />
    <input name="checkbox" id="text" type=checkbox /> some TEXT<br />
        <div class=content id="text">
            <input type=text name=text_string /><br />
            Color <input type=text name=Color /><br />
            Size <input type=text name=Size /><br />
            <input type=checkbox name=text_font value=bold /><strong>bold</strong> <input type=checkbox name=text_font value=italic /><i>italic</i> <input type=checkbox name=text_font value=underline /><u>underline</u><br />
            <input type=submit name=submit_text value="post text" />
        </div>
    <br />

    <input name="submit" type="submit"/>
</form>

那么，如果该怎么办呢？检查从“表”的复选框时，应可见div [ID =表]，当检查“图像”复选框时，应可见div [ID = Image] ......但自动。

假设我有一千个带有某种内容的复选框，每个复选框在选中时都会显示。我绝对不想为每个人制作一个 :if: ；但在单击的复选框下方获得第一个 DIV。

希望我已经足够清楚了。那么请问，你能帮忙吗？

PS：我还希望在第一次加载页面时隐藏那些 div。

Answer 1

注意：您的 HTML 标记无效，document 上下文中的 ID 必须是唯一的

你可以使用：

$("div[class=content]").hide(); // you should hide by default in CSS instead
$("input[type=checkbox]").change(function () {
    $(this).nextAll('.content').first().toggle(this.checked); // this.checked could be ommited here
});

DEMO

Answer 2

试试这个：

$("div[class=content]").hide();
    $("input[type=checkbox]").click(function(){
        if($(this).is(":checked"))
        {
            $(this).siblings(".content").show();
        }
        else
        {
            $(this).siblings(".content").hide();
        }
    });

您可能还想确保用引号括住您的 html 属性值（我注意到您的 div 的类值周围没有引号。

将您的输入和 div 包装在父 div 中，这样就不会所有其他输入/div 都是同级的。

<form action="" method="post" style="border:1; border-style:solid;">
    <div>
        <input name="checkbox" id="table" type=checkbox /> a TABLE<br />
        <div class=content id="table">
            COLs <input type=text name=COLs /><br />
            ROWs <input type=text name=ROWs /><br />
            <input type=submit name=submit_table value="create table" />
        </div>
    </div>
    <br/>
    <br />
    <div>
        <input name="checkbox" id="image" type=checkbox /> an IMAGE<br />
        <div class=content id="image">
            Width <input type=text name=Width /><br />
            Height <input type=text name=Height /><br />
            <input type=submit name=submit_image value="see image" />
        </div>
     </div>
    <br />
    <br />
    <div>
        <input name="checkbox" id="text" type=checkbox /> some TEXT<br />
        <div class=content id="text">
            <input type=text name=text_string /><br />
            Color <input type=text name=Color /><br />
            Size <input type=text name=Size /><br />
            <input type=checkbox name=text_font value=bold /><strong>bold</strong> <input type=checkbox name=text_font value=italic /><i>italic</i> <input type=checkbox name=text_font value=underline /><u>underline</u><br />
            <input type=submit name=submit_text value="post text" />
        </div>
     </div>
    <br />

    <input name="submit" type="submit"/>
</form>

Answer 3

为什么不直接写：

$("div.content")
// or even
$(".content")
// insted of
$("div[class=content]")
// and
$(":checkbox")
// instead of
$("input[type=checkbox]")
// Could there be enything other than "input"?