Javascript 动态添加和删除复选框输入字段

借助jquery的功能，我可以动态添加或删除复选框字段。我有一个

主复选框

，如果单击它将显示

子项

复选框。要添加前面提到的附加复选框，我将

克隆

，然后将

id

和

名称

分配给新复选框。但是我有两大难题：如果选中

main_项

复选框，它将显示其

sub_项

，但是当我克隆时，我想显示新的

main_项

的

sub_项

？其次，分配给新

子项的
id
和
名称
不正确，它将值分配给
标记，而不是复选框

JQUERY

    $('#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();
        }
    });
    $('#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 id="main-panel"> 
  <label>Item List</label>
              <div>
              <ul id="pq_entry_1" class="clonedSection">
                <li style="list-style-type: none;">
                <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 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>
              </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>
</div>

$('#btnAdd').click(function () {
    var num = $('.clonedSection').length;
    var newNum = 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);
    //hide sub item
    newSection.find('.sub-item').hide();

    //change the input element selectors to use name
    newSection.find('input[name^="main_item_"]').attr('id', 'main_item_' + newNum).attr('name', 'main_item_' + newNum).attr('placeholder', 'Item #' + newNum + ' Name');
    newSection.find('input[name^="sub_item_"]').attr('id', 'sub_item_' + newNum).attr('name', 'sub_item_' + newNum);
    newSection.find('input[name^="other_item_"]').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');
});