Dynamically adding and removing checkbox input fields

Question

With the ability of jquery I am able to dynamically add or delete checkbox fields. I have a main checkbox that if clicked it will show sub_item checkboxes. To add an additional check box as mentioned previously, I am cloning and then assigning an id and name to the new checkbox. But I am having two major difficulites: if the main_item checkbox is checked it will show its sub_item but when I clone I would like to show the new main_item’s sub_item as initially hidden? Second, the id and name assigned to new sub_items is not correct, it is assigning the values to the <li> tag instead of the checkbox. JSFIDDLE

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>

the first problem is not clear

Arun P Johny
– Arun P Johny

2014-01-31 06:31:05 +00:00
Commented Jan 31, 2014 at 6:31 — Arun P Johny
– Arun P Johny, Commented Jan 31, 2014 at 6:31

Arun P Johny · Accepted Answer · 2014-01-31 06:33:38Z

1

Try

$('#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');
});

Demo: Fiddle

answered Jan 31, 2014 at 6:33

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

axel.michel Over a year ago

It would be easier and more efficient to handle your renaming in a loop, I have updated your fiddle: jsfiddle.net/5634e/1

Collectives™ on Stack Overflow

Dynamically adding and removing checkbox input fields

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related