Question

因此，当我勾选一个复选框时，我希望显示一个元素，然后在未选中时隐藏。

                <div class="hndle">
                    <table class="form-table">
                        <td class="left">
                            Environmental Findings
                        </td>
                        <td>
                            <input type="checkbox" class="check">
                        </td>
                    </table>
                </div>
                <div class="hndle">
                    <textarea></textarea>
                </div>
                <div class="hndle">
                    <table class="form-table">
                        <td class="left">
                            Recommendations
                        </td>
                        <td>
                            <input type="checkbox" class="check">
                        </td>
                    </table>
                </div>
                <div class="hndle">
                    <textarea></textarea>
                </div>

好的，所以当单击复选框时，我希望它显示带有类hndle的下一个div。（里面有textarea的那个）。

这是我尝试过的jQuery代码，但运气不好。

        $('.check').change(function(){
            if($(this).is(':checked')){
                $(this).parents('hndle').next().show();
            }else{
                $(this).parents('hndle').next().hide();
            }
        });

Answer 1

你有不正确的选择器来定位下一个句柄div元素。 hndle是div的类名。因此您需要使用类选择器.：

$('.check').change(function(){
    $(this).closest('.hndle').next().toggle(this.checked);
}).change(); // trigger event to hide on load

<强> Working Demo

Answer 2

hndle是目标祖先元素的一类，因此请使用类选择器

$('.check').change(function() {
  $(this).closest('.hndle').next().toggle(this.checked);
});

$('.check').closest('.hndle').next().hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hndle">
  <table class="form-table">
    <td class="left">
      Environmental Findings
    </td>
    <td>
      <input type="checkbox" class="check" />
    </td>
  </table>
</div>
<div class="hndle">
  <textarea></textarea>
</div>
<div class="hndle">
  <table class="form-table">
    <td class="left">
      Recommendations
    </td>
    <td>
      <input type="checkbox" class="check" />
    </td>
  </table>
</div>
<div class="hndle">
  <textarea></textarea>
</div>

复选框时显示元素：在jquery中检查

2 个答案: