How can I create same number of input fields and fetch the data from available list items using JQuery?

user_3110145 0
Viewed 30

I have three list items (those are dynamically created and can be more or less also) whose have checkboxes and labels.

Based on number of items (<li>'s), I want to create input fields with index numbers ('Item 1, Item 2, etc...') dynamically.

Currently, I am manually appending number of divs based on list items. These list can be vary based on condition.

How can I achive this dynamically instead of using nth-child (manualy)

jsFiddle

enter image description here

$(document).on('click', '#getCheckboxesContent', function(){
  var count = $('.checkboxes ul li').length;
  var value1 = $('.checkboxes ul li:nth-child(1) label .lbl').text();
  var value2 = $('.checkboxes ul li:nth-child(2) label .lbl').text();
  var value3 = $('.checkboxes ul li:nth-child(3) label .lbl').text();
  $('.checkboxes-content').html('');
  $('.checkboxes-content').append('Total checkboxes : ' + count);
  $('.checkboxes-content').append('<div class="item">Item 1 : <input type="text" value="'+value1+'" /></div>');
  $('.checkboxes-content').append('<div class="item">Item 2 : <input type="text" value="'+value2+'" /></div>');
  $('.checkboxes-content').append('<div class="item">Item 3 : <input type="text" value="'+value3+'" /></div>');
})
body{font-family:verdana;font-size:14px;}
.checkboxes{padding:20px;}
ul{margin:0;padding:0;list-style:none;}
li{margin-top:5px;}
label .lbl{margin-left:5px;}
.item{margin-top:10px;background:#efefef;padding:10px;}
h2{font-weight:bold;margin:0;padding:0;font-size:16px;}
.checkboxes-content{margin:15px;}
#getCheckboxesContent{margin-left:15px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkboxes">
  <h2>Heading</h2>
  <ul>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 1</span></label></li>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 2</span></label></li>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 3</span></label></li>
  </ul>
</div>

<a href="javascript:;" id="getCheckboxesContent">Get content</a>

<div class="checkboxes-content"></div>

jquery
1 Answers

The simplest way to achieve this dynamically would be to select all the relevant :checkbox elements in the DOM and then use map() to build a div for each of them in an array. The HTML can then be appended to the DOM in the target location. Try this:

let $checkboxContent = $('.checkboxes-content');

$(document).on('click', '#getCheckboxesContent', function() {
  let html = $('.checkboxes :checkbox').map((i, el) => `<div class="item">Item ${i + 1}: <input type="text" value="${el.nextElementSibling.textContent}" /></div>`).get();
  $checkboxContent.append(html);
});
body {
  font-family: verdana;
  font-size: 14px;
}

.checkboxes {
  padding: 20px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  margin-top: 5px;
}

label .lbl {
  margin-left: 5px;
}

.item {
  margin-top: 10px;
  background: #efefef;
  padding: 10px;
}

h2 {
  font-weight: bold;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.checkboxes-content {
  margin: 15px;
}

#getCheckboxesContent {
  margin-left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkboxes">
  <h2>Heading</h2>
  <ul>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 1</span></label></li>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 2</span></label></li>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 3</span></label></li>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 4</span></label></li>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 5</span></label></li>
  </ul>
</div>

<a href="javascript:;" id="getCheckboxesContent">Get content</a>

<div class="checkboxes-content"></div>

If the number of divs should always equal the number of checkboxes then you should consider changing append() to html(), so that successive clicks of the button don't add an infinite number of elements.

user_5194130
Related