CODEWITHSUNDEEP
javascriptjquerycheckbox
Darren
Darren

Reputation: 2290

Checkbox Value to List item with Jquery

How can I get the value of each value of checked checkbox to be displayed as a list item?

I have a snippet below that puts the values into a textArea input but this now does not meet my needs and I am looking to find a way to add the outputted values to a <ul>.

function checkbox() {

  var checkboxes = document.getElementsByName('checkboxLocations');
  var checkboxesChecked = [];
  // loop over them all
  for (var i = 0; i < checkboxes.length; i++) {
    // And stick the checked ones onto an array...
    if (checkboxes[i].checked) {
      checkboxesChecked.push(checkboxes[i].value);
    }
  }
  document.getElementById("show").value = checkboxesChecked;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>CB 1</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Muriwai Beach" onClick="checkbox();" />

<label>CB 2</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Bethells Sand Dunes" onClick="checkbox();" />

<label>CB 3</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Whatipu Beach" onClick="checkbox();" />

<input type="text" id="show" name="locations">

Upvotes: 2

Views: 75

Answers (4)

wesleycoder
wesleycoder

Reputation: 1205

You could use some good practices like below:

function checkbox() {
    var locations = document.querySelectorAll('.js-locations'); // using querySelector is more flexible and more clear
    var fragment = document.createDocumentFragment(); // create a fragment for performance reasons
    var items = locations.map(function (loc) { // for any loop over arrays you may prefer to use the .map method
        const li = document.createElement('li'); // it's preferable to create the nodes and append them later
        li.textContent = loc; // or .innerHTML
        fragment.appendChild(li);
    }
    var ul = document.createElement('ul');
    document.body.appendChild(fragment); // or your target output element
}

Read more here

Upvotes: 0

karthik reddy
karthik reddy

Reputation: 479

In option it's better to use jQuery upto our knowledge to simplify the code.

$("input:checkbox").click(function(){
  var checkedList = $("input:checkbox:checked").toArray();
  $("#show").html('')
  for(var ch of checkedList){
     $("#show").append("<li>"+ch.value+"</li>");
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>CB 1</label>
<input class="radio-button" type="checkbox" name="checkboxLocations" value="Muriwai Beach" />

<label>CB 2</label>
<input  class="radio-button" type="checkbox" name="checkboxLocations" value="Bethells Sand Dunes" />

<label>CB 3</label>
<input  class="radio-button" type="checkbox" name="checkboxLocations" value="Whatipu Beach" />

<ul id="show" name="locations" />

Upvotes: 0

xianshenglu
xianshenglu

Reputation: 5369

check to see:

function checkbox() {

  var checkboxes = document.getElementsByName('checkboxLocations');
  var checkboxesChecked = [];
  var ul=document.getElementById('show');
  ul.innerHTML='';
  // loop over them all
  for (var i = 0; i < checkboxes.length; i++) {
    // And stick the checked ones onto an array...
    if (checkboxes[i].checked) {
      ul.innerHTML+='<li>'+checkboxes[i].value+'</li>';
    }
  }  
}
<label>CB 1</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Muriwai Beach" onClick="checkbox();" />

<label>CB 2</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Bethells Sand Dunes" onClick="checkbox();" />

<label>CB 3</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Whatipu Beach" onClick="checkbox();" />

<ul id='show' name="locations"></ul>

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 122006

Just take a ul and keep appending li.

function checkbox() {

  var checkboxes = document.getElementsByName('checkboxLocations');
  var checkboxesChecked = [];
  // loop over them all
   var liText ="";
  for (var i = 0; i < checkboxes.length; i++) {
    // And stick the checked ones onto an array...
    
    if (checkboxes[i].checked) {
      liText += "<li>"+checkboxes[i].value+"</li>";
    }
  }
  document.getElementById("show").innerHTML = liText;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>CB 1</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Muriwai Beach" onClick="checkbox();" />

<label>CB 2</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Bethells Sand Dunes" onClick="checkbox();" />

<label>CB 3</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Whatipu Beach" onClick="checkbox();" />

<ul id="show" name="locations" />

Upvotes: 2

Related Questions