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>

那么，该怎么办？当复选框来自＆＃34;一个表＆＃34;如果选中，那么div [id = table]应该是可见的，当来自＆＃34;图像＆＃34;如果选中，div [id = image]应该是可见的......但是会自动显示。

让我们说我有一千个复选框，每个复选框都有一些内容供每个人在检查时显示。我当然不想做出：if：对于每一个;但是点击下面的复选框即可获得第一个DIV。

希望我足够清楚。那么，拜托，你能帮忙吗？

PS：我还希望在首次加载页面时隐藏这些div。

Answer 1

试试这个：

$("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 2

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

您可以使用：

$("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 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"?

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

3 个答案:

DEMO