如何显示隐藏在JQuery中使用close和find方法选择的元素？

Question

I have form with check box and text area. If checkbox is check I want to show textarea if not hide. Here is example of what I have:

 $(document).on('click', '.dc-checkbox', setCheckboxVal); function setCheckboxVal() { var fldCheckbox = $(this); var fldComment = $(this).closest('div').find('.dc-comment'); console.log(fldComment); if (fldCheckbox.is(':checked')) { fldCheckbox.val(1); fldComment.show(); } else { fldCheckbox.val(0); fldComment.hide(); } } 

 .dc-comment { display: none; } 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <form id="myfrm" method="post"> <div class="checkbox"> <label for="checkbox1"> <input type="checkbox" name="dc_status1" id="dc_status1" class="dc-checkbox"> Checkbox 1</label> </div> <div class="form-group dc-comment"> <label for="comment1" class="pull-left">Comment:</label> <textarea class="form-control" rows="2" name="dc_comment1" id="dc_comment1"></textarea> </div> <div class="checkbox"> <label for="checkbox2"><input type="checkbox" name="dc_status2" id="dc_status2" class="dc-checkbox" value="1"> Checkbox 2</label> </div> <div class="form-group dc-comment"> <label for="comment2" class="pull-left">Comment:</label> <textarea class="form-control" rows="2" name="dc_comment2" id="dc_comment2"></textarea> </div> <div class="checkbox"> <label for="checkbox4"><input type="checkbox" name="dc_status4" id="dc_status4" class="dc-checkbox"> Checkbox 3</label> </div> <div class="form-group dc-comment"> <label for="comment4" class="pull-left">Comment:</label> <textarea class="form-control" rows="2" name="dc_comment4" id="dc_comment4"></textarea> </div> </form> 

As you can see if I check the checkbox comment textarea is still not showing. I'm not sure if .closest() and .find() are methods that support show/hide in this case. Please let me know if you know the way to achieve this. Thank you.

Answer 1

$(this).closest('div') finds the first parent div, in this case the one with class checkbox - .find(..) then looks in that div's children . As the div class=checkbox div doesn't have div class=dc-comment as its child, it doesn't find it.

.dc-comment is a sibling (same level / same parent) as .checkbox .

Change to .next() or .nextAll(".dc-comment").first()

Don't use .next(".dc-comment") unless you know what it does as it may break (gets the next only if it matches, not the next that does match).

Updated snippet:

 $(document).on('click', '.dc-checkbox', setCheckboxVal); function setCheckboxVal() { var fldCheckbox = $(this); var fldComment = $(this).closest('div').nextAll('.dc-comment').first(); //console.log(fldComment); if (fldCheckbox.is(':checked')) { fldCheckbox.val(1); fldComment.show(); } else { fldCheckbox.val(0); fldComment.hide(); } } 

 .dc-comment { display: none; } 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <form id="myfrm" method="post"> <div class="checkbox"> <label for="checkbox1"> <input type="checkbox" name="dc_status1" id="dc_status1" class="dc-checkbox"> Checkbox 1</label> </div> <div class="form-group dc-comment"> <label for="comment1" class="pull-left">Comment:</label> <textarea class="form-control" rows="2" name="dc_comment1" id="dc_comment1"></textarea> </div> <div class="checkbox"> <label for="checkbox2"><input type="checkbox" name="dc_status2" id="dc_status2" class="dc-checkbox" value="1"> Checkbox 2</label> </div> <div class="form-group dc-comment"> <label for="comment2" class="pull-left">Comment:</label> <textarea class="form-control" rows="2" name="dc_comment2" id="dc_comment2"></textarea> </div> <div class="checkbox"> <label for="checkbox4"><input type="checkbox" name="dc_status4" id="dc_status4" class="dc-checkbox"> Checkbox 3</label> </div> <div class="form-group dc-comment"> <label for="comment4" class="pull-left">Comment:</label> <textarea class="form-control" rows="2" name="dc_comment4" id="dc_comment4"></textarea> </div> </form>