多個複選框切換使用jquery

Question

我有一個複選框的列表，我希望他們的內容切換時檢查。我用jQuery寫了它，但我想以某種方式優化我的代碼，而不必爲每個複選框編寫函數。

$(document).ready(function() { 
 
    $("#purpose-1").click(function() { 
 
    $("#purpose-detail-1").toggle(this.checked); 
 
    }).triggerHandler('click'); 
 
    $("#purpose-2").click(function() { 
 
    $("#purpose-detail-2").toggle(this.checked); 
 
    }).triggerHandler('click'); 
 
    $("#purpose-3").click(function() { 
 
    $("#purpose-detail-3").toggle(this.checked); 
 
    }).triggerHandler('click'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <input type="checkbox" id="purpose-1">Exhibition 
 
    <ul id="purpose-detail-1"> 
 
     <li> 
 
     <div>Title:</div> 
 
     <div> 
 
      <input type="text"> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div>Opening Date:</div> 
 
     <div> 
 
      <input type="text"> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" id="purpose-2">Publication 
 
    <ul id="purpose-detail-2"> 
 
     <li> 
 
     <div>Title:</div> 
 
     <div> 
 
      <input type="text"> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" id="purpose-3">Event 
 
    <ul id="purpose-detail-3"> 
 
     <li> 
 
     <div>Title:</div> 
 
     <div> 
 
      <input type="text"> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div>Event Date:</div> 
 
     <div> 
 
      <input type="text"> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div>Event Time:</div> 
 
     <div> 
 
      <input type="text"> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

我會用使用類和訪問ul的next()

$(document).ready(function() { 
 
    $(".my-ul").hide(); 
 
    $(".my-checkbox").click(function() { 
 
    // in case the 'ul' is next to the checkbox: 
 
    // $(this).next('ul').slideToggle(this.checked); 
 
    // in case the 'ul' is in the same element but not next to the checkox: 
 
    $(this).parents('li').find('ul').slideToggle(this.checked); 
 
    // or maybe even better: 
 
    // $(this).closest('li').find('ul').slideToggle(this.checked); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <p> <input type="checkbox" class="my-checkbox"><strong>Exhibition</strong> </p> <ul class="my-ul"> 
 
     <li> 
 
     <div>Title:</div> 
 
     <div> 
 
      <input type="text"> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div>Opening Date:</div> 
 
     <div> 
 
      <input type="text"> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <input class="my-checkbox" type="checkbox" id="purpose-2">Publication 
 
    <ul class="my-ul" id="purpose-detail-2"> 
 
     <li> 
 
     <div>Title:</div> 
 
     <div> 
 
      <input type="text"> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <input class="my-checkbox" class="my-checkbox" type="checkbox" id="purpose-3">Event 
 
    <ul class="my-ul" id="purpose-detail-3"> 
 
     <li> 
 
     <div>Title:</div> 
 
     <div> 
 
      <input type="text"> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div>Event Date:</div> 
 
     <div> 
 
      <input type="text"> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div>Event Time:</div> 
 
     <div> 
 
      <input type="text"> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

使用類：

<input type="checkbox" class="purpose-checkbox" id="purpose-1">Exhibition 
<ul class="purpose-detail" id="purpose-detail-1"> 
    ... 
</ul> 

然後在jQuery的：

$(".purpose").click(function() { // We choose elements with purpose class 
    var $this = $(this); // The purpose checkbox clicked 
    var purpose_detail = $(".purpose-detail", $this); // Element with purpose-detail class inside the clicked checkbox 
    purpose_detail.toggle($this.prop("checked")); 
});