动态创建多个复选框

Question

我有一个jquery函数，它以动态方式生成/克隆复选框。我可以添加或删除我想要的复选框。我在做两件事时遇到了一些困难：如何在选中sub_item复选框时显示main_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"]();
    });
});