Question

我正在尝试在检查复选框时展开div但不确定最佳方法。我在页面上有多个复选框，只想显示每个复选框下面的div。这是我在HTML中的内容：

<!-- Start Topics -->
<div id="topics">
    <div class="box_heading">
       <h2>Topics</h2>
       <span class="line"></span>
    </div>
    IF CHECKED SHOW BELOW DIV
    <div class="row">
       <p>
          <label for=frmTopic">Check Me #1</label> <input type="checkbox" class="TopicCheckbox" name="frmTopic" id="frmTopic01" value="1"/>
       </p>
    </div>
    SHOW THIS DIV IF CHECKED
    <div class="row" name="divComment" id="divComment01">
       <p>
        <label for="frmComment">Comment on Check Me</label>
        <textarea name="frmComment01" id="frmComment01" </textarea>
       </p>
       <div class="row" name="fileUpload" id="fileUpload">
          <input class="button green" type="file" caption="Choose files" name="file" id="file"><br/>
       </div>
   </div>
IF CHECKED SHOW BELOW DIV
        <div class="row">
           <p>
              <label for=frmTopic">Check Me #2</label> <input type="checkbox" class="TopicCheckbox" name="frmTopic" id="frmTopic02" value="1"/>
           </p>
        </div>
        SHOW THIS DIV IF CHECKED
        <div class="row" name="divComment" id="divComment02">
           <p>
            <label for="frmComment">Comment on Check Me</label>
            <textarea name="frmComment02" id="frmComment02" </textarea>
           </p>
           <div class="row" name="fileUpload" id="fileUpload">
              <input class="button green" type="file" caption="Choose files" name="file" id="file"><br/>
           </div>
       </div>
    </div>

这是我无法工作的jQuery。希望我很亲密。

$('.TopicCheckbox').click(function() {
    if( $(this).is(':checked')) {
        //alert("clicked");

         $(this).parent().find("div[name=divComment]").slideToggle('slow', function() {
            // Animation complete.
         });
    } else {
        $(this).parent().find("div[name=divComment]").hide();
    }
});

Answer 1

您需要从复选框中向上几级才能获得有问题的div：

$(this).parent().parent().parent().find("div[name=divComment]")

小提琴：http://jsfiddle.net/PfbMr/

Answer 2

尝试以下脚本。

$('.TopicCheckbox').click(function() {
    if( $(this).is(':checked')) {
        //alert("clicked");

        $(this).parents("#topics").find("div[name=divComment]").slideToggle('slow', function() {
            // Animation complete.
        });
    } else {
        $(this).parents("#topics").find("div[name=divComment]").hide();
    }
});

您应该使用父母来遍历多个级别。

谢谢，

Jothi

Answer 3

parent()默认只上升一级。使用parents()，或使用从树上方开始的选择器，例如$('#topics')。

Answer 4

好的，首先，divComment元素有一个ID，所以你总是可以使用id来jsut引用它。你正在将它应用于一个类，所以它让我觉得你在同一个页面上有多个元素，id为divcomment，这是无效的html，需要先修复。

如果不是这样的话，以下代码应该可以正常工作。

$('.TopicCheckbox').change(function() {
if( $(this).is(':checked')) {
    //alert("clicked");

     $("#divComment").slideToggle('slow', function() {
        // Animation complete.
     });
} else {
    $("#divComment").hide();
}
});

Answer 5

这是你在找什么：http://jsfiddle.net/gespinha/WJx4M/1/

JQUERY

$(document).ready(function(){
    $('#divComment').hide();

    $('.TopicCheckbox').click(function() {
       if( $(this).prop('checked', true)) {
          $('#divComment').show();
       }
    });
});

使用jQuery选择div而不是兄弟

5 个答案: