0

当复选框被选中但不确定最好的方法时，我正在尝试扩展 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();
    }
});
4

5 回答 5

1

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

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

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

于 2013-08-26T20:13:04.903 回答
1

试试下面的脚本。

$('.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();
    }
});

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

谢谢，

约蒂

于 2013-08-26T20:13:59.970 回答
1

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

于 2013-08-26T20:14:13.560 回答
1

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

如果不是这种情况，以下代码应该可以正常工作。

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

     $("#divComment").slideToggle('slow', function() {
        // Animation complete.
     });
} else {
    $("#divComment").hide();
}
});
于 2013-08-26T20:16:49.170 回答
1

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

查询

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

    $('.TopicCheckbox').click(function() {
       if( $(this).prop('checked', true)) {
          $('#divComment').show();
       }
    });
});
于 2013-08-26T20:17:19.457 回答