如何使用JQuery隐藏/显示与相邻复选框相关联的div？

问题描述

| 我刚开始使用JQuery并感到困惑。我想要一系列输入复选框，当选中它们时，它们将显示/隐藏相邻的文本框。我已经掌握了逻辑的一部分，但是您可能会发现，选中任何一个复选框，都会隐藏/显示所有文本框。如何使每个复选框仅影响直接位于其下方的div的内容？我不想为每个复选框写一个单独的函数。

<script type=\"text/javascript\">                                            
$(document).ready(function() {

   $(\":checkBox\").click(function(){
        if ($(\":checkBox\").is(\":checked\")) {
                $(\".optionalinfo\").show(\"fast\");}
        else {      
                $(\".optionalinfo\").hide(\"fast\");}
        });
});

 </script>   

 </head>                                                                 
 <body>                                                                  

<input id=\"chk1\" type=\"checkBox\">Hide/Show text1</input>
<div class=\"optionalinfo\">
<input id=\"text1\" type=\"text\"></input>
</div>
<br>

<input id=\"chk2\" type=\"checkBox\">Hide/Show text2</input>                       
<div class=\"optionalinfo\">
<input id=\"text2\" type=\"text\"></input>
</div>
<br>

<input id=\"chk3\" type=\"checkBox\">Hide/Show text3</input>                       
<div class=\"optionalinfo\">
<input id=\"text3\" type=\"text\"></input>
</div>

解决方法

要在复选框旁边显示“ 1”，请执行以下操作：

$(\'input:checkbox\').click(
    function()
        $(this).next(\'.optionalinfo\').show();
    });

JS小提琴演示要使复选框处于切换状态，请执行以下操作：

$(\'input:checkbox\').click(
    function() {
        $(this).next(\'.optionalinfo\').toggle();
    });

JS小提琴演示 , http://api.jquery.com/next/

<script type=\"text/javascript\">                                            
$(document).ready(function() {
    $(\":checkbox\").click(function(){
        if ($(\":checkbox\").is(\":checked\")) {
            $(this).next(\'div.optionalinfo\').show(\"fast\");
        } else {      
            $(this).next(\'div.optionalinfo\').hide(\"fast\");
        }
    });
});
</script>

, 使用（jQuery v1.6）

$(\'input:checkbox\').live (\'click\',function() {
    if($(this).prop(\'checked\')) {
            $(this).next(\'div.optionalinfo\').hide();
    }
    else {
          $(this).next(\'div.optionalinfo\').show();
    }            
});

演示

div jquery 使用使用使用关联关联关联复选框复选框显示显示相邻隐藏隐藏