動態創建多個複選框

Question

我有一個以動態方式生成/克隆複選框的jquery函數。我可以添加或刪除儘可能多的複選框。我在做兩件事情時遇到了一些困難：當檢查main_item複選框時，如何顯示sub_item複選框。這裏是一個DEMO

jQuery的

$('#btnAdd').click(function() { 
    var num = $('.clonedSection').length; 
    var newNum = new Number(num + 1); 

    var newSection = $('#pq_entry_' + num).clone().attr('id', 'pq_entry_' + newNum); 
    newSection.find('input[type="text"]').val(''); 
    newSection.find('input[type="checkbox"]').prop('checked', false); 
    newSection.children(':first').children(':first').attr('id', 'main_item_' + newNum).attr('name', 'main_item_' + newNum).attr('placeholder', 'Item #' + newNum + ' Name'); 
    newSection.children(':nth-child(2)').children(':first').attr('id', 'sub_item_' + newNum).attr('name', 'sub_item_' + newNum); 
    newSection.children(':nth-child(3)').children(':first').attr('id', 'other_item_' + newNum).attr('name', 'other_item_' + newNum); 
    newSection.insertAfter('#pq_entry_' + num).last(); 

    $('#btnDel').prop('disabled', ''); 

    if (newNum == 10) $('#btnAdd').prop('disabled', 'disabled'); 
    }); 

    $('#btnDel').click(function() { 
    var num = $('.clonedSection').length; // how many "duplicatable" input fields we currently have 
    $('#pq_entry_' + num).remove(); // remove the last element 

    // enable the "add" button 
    $('#btnAdd').prop('disabled', ''); 

    // if only one element remains, disable the "remove" button 
    if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled'); 
    }); 

    $('#btnDel').prop('disabled', 'disabled'); 
    }); 

HTML

 <div> 
     <ul id="pq_entry_1" class="clonedSection"> 
     <li style="list-style-type: none;"> 
     <input id="main_item_1" name="main_item_1" type="checkbox"><label>Main Item</label> 
     </li> 
      <li style="list-style-type: none;"> 
       <input id="sub_item_1" name="sub_item_1" type="checkbox"><label>Sub Item</label> 
      </li> 
     <li style="list-style-type: none;"> 
      <input id="other_item_1" name="other_item_1" type="checkbox"><label>Other Item</label> 
     </li> 
     </ul> 
     <center><input type='button' class="button tiny radius" id='btnAdd' value='Add Another' /> 
     <input type='button' class="button tiny radius alert" id='btnDel' value='Delete Last' /></center> 
     </div> 

顯示效果

Answer 1

如果我沒理解好了，這樣的事情：

$('#main-panel').on('click', '.main-item', function() { 
    var $mainItem = $(this); 
    var $subItem = $mainItem.parent().next('.sub-item'); 
    if ($mainItem.is(':checked')) { 
     $subItem.show(); 
    } else { 
     $subItem.hide(); 
    } 
}); 

與此標記：

<div id="main-panel"> 
    <ul id="pq_entry_1" class="clonedSection"> 
     <li> 
      <input id="main_item_1" class='main-item' name="main_item_1" type="checkbox" /> 
      <label>Main Item</label> 
     </li> 
     <ul class="sub-item" style='display: none;'> 
      <li> 
       <input id="sub_item_1" name="sub_item_1" type="checkbox" /> 
       <label>Sub Item</label> 
      </li> 
     </ul> 
     <!-- same as yours --> 

現場演示：jsFiddle

Answer 2

的主要問題是，你的子項是不是真的在此刻子項目。將子項目放在它們的子項目中，然後生成簡單的腳本。像這樣

HTML：

<div id="items"> 
    <ul id="pq_entry_1" class="mainitems"> 
     <li style="list-style-type: none;"> 
      <input id="main_item_1" name="main_item_1" type="checkbox" class="mainitem"> 
      <label>Main Item</label> 
      <ul class="subitems"> 
       <li style="list-style-type: none;"> 
        <input id="sub_item_1" name="sub_item_1" type="checkbox" class="subitem"> 
        <label>Sub Item</label> 
       </li> 
      </ul> 
     </li> 
     <li style="list-style-type: none;"> 
      <input id="other_item_1" name="other_item_1" type="checkbox" class="mainitem"> 
      <label>Other Item</label> 
     </li> 
    </ul> 
</div> 

的CSS：

.subitems 
{ 
    display: none; 
} 

的Javascript（jQuery的）的一部分，你還不具備：

$(function() { 
    $("#items").on("click", ".mainitem", function() { 
     $(this).closest("ul").find(".subitems")[$(this).prop("checked") ? "fadeIn": "fadeOut"](); 
    }); 
});