当选中复选框时，fadeIn / fadeOut最接近的div

Question

I have a form with some optional fields that I don't want to be displayed unless the user specifically enables them. I am struggling to figure out the .closest() method in jQuery hoping for some guidance. There are multiple forms like this so I didn't want to us an #id for the sake of DRY.

 $('.enable-stage').change(function() { if ($(this).is(':checked')) { $(this).closest('.stage-dates').fadeIn("slow").toggleClass("hidden"); } else { $(this).closest('.stage-dates').fadeOut("slow").toggleClass("hidden"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="stage"> <h3>Stage Name</h3> <label><input type="checkbox" class="enable-stage"> Enable Stage</label> <div class="stage-dates hidden"> <input type="date"> </div> </div> 

I know the general if statement is working because when using console.log("checked") and console.log("unchecked") inside the if , it works. I think I am mishandling the .closest method but I cannot figure out how/why.

Edit: for clarification, I'm trying to make it so when the checkbox is checked the closest .stage-dates div fades in and when it's unchecked it fades out.

Answer 1

$.closest() returns the first ancestor of the selected element. It doesn't search the entire DOM and return the closest match. To use $.closest() here, we can find the closest label (since label is an ancestor to the checkbox), then use $.next() to target .stage-dates

 $('.enable-stage').change(function() { var $closest = $(this).closest('label').next('.stage-dates'); if ($(this).is(':checked')) { $closest.fadeIn("slow").toggleClass("hidden"); } else { $closest.fadeOut("slow").toggleClass("hidden"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="stage"> <h3>Stage Name</h3> <label><input checked type="checkbox" class="enable-stage"> Enable Stage</label> <div class="stage-dates hidden"> <input type="date"> </div> </div>