Question

我找到了这个脚本，其中一个复选框（一旦选中）显示相应的div。 http://pastebin.com/Hqau6kRD

但我有多个复选框，一旦检查就会显示相应的div。

我尝试将以下内容添加到html文件中，但这不起作用：

<div style="clear: both;"></div>

<input type="checkbox" name="mycheckbox" id="mycheckbox" value="0" />
<div id="mycheckboxdiv" style="display:none">
  This content should appear when the checkbox is checked
</div>

Answer 1

只需使用CSS printf属性即可：

＆＃13;

:checked

＆＃13;

input + div {
  display: none;
}
input:checked + div {
  display: block;
}

＆＃13;

Answer 2

    <input type="checkbox" name="mycheckbox" id="mycheckbox" value="0" data-divid="mycheckboxdiv"/>
    <div id="mycheckboxdiv" style="display:none">
    This content should appear when the checkbox is checked
    </div>

    //js code

    $(document).body(function(){
     $("input[type='text']").change(function(){
        var val=$(this).attr('data-divid');
       if($(this).attr('checked')){
         $("div [id='"+val+"']").show();}
       else{
         $("div [id='"+val+"']").hide();}        
     });
    });

Answer 3

另一个解决方案是将您的项目包装在容器div中，当用户选中复选框时，使用closest()获取容器div，然后使用find获取相关的文本div并显示/隐藏它。

我更喜欢使用closest()和find()而非next()方法，因为即使您在复选框和相关div中添加了一些新元素，第一个也会有用。将来

<div class="itemContainer">
  <input type="checkbox" name="mycheckbox" id="mycheckbox" value="0" />
  <div id="mycheckboxdiv" class="meta" style="display:none">
      This content should appear when the checkbox is checked
   </div>
</div>

你的jQuery代码来处理checkcbox checcked事件

$(function(){

  $("input[name='mycheckbox']").change(function(e){

     var _this=$(this);
     if(_this.prop("checked"))
     {
        _this.closest(".itemContainer").find(".meta").show();
     }
     else
     {
         _this.closest(".itemContainer").find(".meta").hide();
     }
  });

});

Here是一个工作样本

选中复选框 - 显示其对应的div

3 个答案: