Show Label of multiple checked checkbox with javascript

Question

I have a list of a few dozen checkboxes as shown in example below. If a user checks several of them I need to show at the bottom of the page which ones was checked, such as: Option One Option three

Was trying to do this with onClick so it will add or remove to the list at the bottom of the page when a checkbox is clicked or un-clicked but not able to get it to work.

Example of my checkboxes HTML

.checkboxes label {
  font-family: Open Sans Italic;
  font-size: 12px;
  color: white;
  font-weight: bold;
  border-radius: 20px 20px 20px 20px;
  background: blue;
  padding: 1px 6px;
  text-align: left;
}

input[type=checkbox]:checked+label {
  color: white;
  background: green;
}

<div class="checkboxes">
     <input type="checkbox" name="lra" id="1adm" value="selected">
     <label for="1adm" class="highlight">Option one</label>
     <br>
     <input type="checkbox" name="lra" id="2adm" value="selected">
     <label for="2adm" class="highlight">Option two</label>
     <br>
     <input type="checkbox" name="lra" id="3adm" value="selected">
     <label for="3adm" class="highlight">Option three</label>
     <br>
     <input type="checkbox" name="lra" id="4adm" value="selected">
     <label for="4adm" class="highlight">Option four</label>
     <br>
</div>

Any suggestion on how I can do this with javascript with multiple boxes checked to show at the bottom of the page using onClick of which ones is clicked or not, showing the label such as:

Option one

Option four

if One and four is checked.

colxi · Accepted Answer · 2018-08-26 00:54:33Z

1

You can achieve it with many approaches. In my implementation, I assign to each checkbox an onClick event handler that adds or removes from a Set , its value, and after iterates the Set, dumping inside a container a string with all the selected checkboxes:

// set to store the selected checkboxes values
let items = new Set();
// reference to the dumping container
let resultContainer= document.getElementById('result')

// onclick event handler
function updateItems(e){
  // value of the  clicked checkbox
  let value = e.target.value;
  // if value is already in the Set, remove it (input unchecked)
  if(items.has(value)) items.delete(value)
  // if value is not in in the set, insert it (input checked)
  else items.add(value)
  //
  // set updated ! now dump its contents...
  //
  // empty string
  let result = '';
  // iterate Set, and generate string with selected values
  
  items.forEach(i=> result += i +'<br>')
  // dump string
  resultContainer.innerHTML=result;
}

// select all checkboxes and assign the onclick event handler
let inputs = Array.from (document.querySelectorAll('input') )

inputs.forEach(i => i.onclick=updateItems )

<div class="checkboxes">
     <input type="checkbox" name="lra" id="1adm" value="one">
     <label for="1adm" class="highlight">Option one</label>
     <br>
     <input type="checkbox" name="lra" id="2adm" value="two">
     <label for="2adm" class="highlight">Option two</label>
     <br>
     <input type="checkbox" name="lra" id="3adm" value="three">
     <label for="3adm" class="highlight">Option three</label>
     <br>
     <input type="checkbox" name="lra" id="4adm" value="four">
     <label for="4adm" class="highlight">Option four</label>
     <br>
</div>
<br>
<div>Selected values</div>
<div id="result"></div>

Note : This will only work, if the initial state of all checkboxes is Unchecked

edited Aug 26, 2018 at 0:54

answered Aug 26, 2018 at 0:31

colxi

8,8303 gold badges48 silver badges44 bronze badges

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

2 Comments

Oscar Over a year ago

Hi, that looks to do what I need, but I need to show on separate lines, how do I put a new line after each one. New to this and learning as I go. Thanks

Oscar Over a year ago

Thanks that is just what I needed and this one helps a lot as it also lets me put the "show selected lines" where I need them.

Ravi Rane · Accepted Answer · 2018-08-26 00:32:06Z

0

This can work with onClick event on each checkbox and some Javascript.

 <input type="checkbox" name="lra" id="1adm" value="selected" onclick="myFunction('1adm')">

<div id="footer" />

<script>
function myFunction(checkId) {
var checkBox = document.getElementById(checkId);
var text = document.getElementById("footer");
if (checkBox.checked == true){
   //add it to footer text
} else {
   //remove from footer text
}
}
</script>

answered Aug 26, 2018 at 0:32

Ravi Rane

1591 bronze badge

Comments

score 0 · Accepted Answer · 2018-08-26 00:52:21Z

Try out this example, although code could have been reasonably short :)

let selector = 'input[type="checkbox"][name="lra"]';
let updateStatus = function() {
  let labels = [];
  Array.prototype.slice.call(document.querySelectorAll(selector + ':checked + label')).forEach(function(l) {
    labels.push(l.textContent || l.innerHTML);
  });
  document.querySelector('#checkStatus').innerHTML = (labels.join('<br/>') || 'Kindly choose from above options');
};
document.addEventListener('DOMContentLoaded', function() {
  Array.prototype.slice.call(document.querySelectorAll(selector)).forEach(function(c) {
    c.addEventListener('click', function(e) {
      e.stopPropagation();
      updateStatus();
    });
  });
  updateStatus(); /* run on page load */
});

.checkboxes label {
  font-family: Open Sans Italic;
  font-size: 12px;
  color: white;
  font-weight: bold;
  border-radius: 20px 20px 20px 20px;
  background: blue;
  padding: 1px 6px;
  text-align: left;
}

input[type=checkbox]:checked+label {
  color: white;
  background: green;
}

#checkStatus {
  border-top: 1px solid #ccc;
  padding: 1rem;
  margin-top: .3rem;
}

<div class="checkboxes">
  <input type="checkbox" name="lra" id="1adm" value="selected">
  <label for="1adm" class="highlight">Option one</label>
  <br>
  <input type="checkbox" name="lra" id="2adm" value="selected">
  <label for="2adm" class="highlight">Option two</label>
  <br>
  <input type="checkbox" name="lra" id="3adm" value="selected">
  <label for="3adm" class="highlight">Option three</label>
  <br>
  <input type="checkbox" name="lra" id="4adm" value="selected">
  <label for="4adm" class="highlight">Option four</label>
  <br>
</div>

<div id="checkStatus"></div>

Thanks, that did exactly what I needed, the one from Colxi worked as well but not sure how to add the new line and I don't see any way to accept both answers.

Collectives™ on Stack Overflow

Show Label of multiple checked checkbox with javascript

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related