Question

我刚刚开始使用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>

Answer 1

要显示复选框旁边的div：

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

JS Fiddle demo

要使复选框成为切换：

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

JS Fiddle demo

Answer 2

使用（jQuery v1.6）

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

DEMO

Answer 3

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隐藏/显示与相邻复选框关联的div？

3 个答案:

DEMO