CODEWITHSUNDEEP
javascript
Behseini
Behseini

Reputation: 6328

How to get the value of checked checkbox in vanilla JavaScript?

I am working on this snippet. Why am I not able to get the value of any checked checkbox with class .shapes?

document.getElementsByName('shapes').onclick = function() {
  var checkboxes = document.getElementsByName('shapes')[0].value;
  console.log(checkbox.value);
}
<div class="js-shapes">
  <span class="ib">
          <input type="checkbox" name="shapes" class="shapes" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label>
        </span>
  <span class="ib">
          <input type="checkbox" name="shapes" class="shapes" value="diamond" id="cb-diamond"> <label for="cb-diamond">Diamond</label>
        </span>
  <span class="ib">
          <input type="checkbox" name="shapes" class="shapes" value="square" id="cb-square"> <label for="cb-square">Square</label>
        </span>
  <span class="ib">
          <input type="checkbox" name="shapes" class="shapes" value="triangle" id="cb-triangle"> <label for="cb-triangle">Triangle</label>
        </span>
  <span class="ib">
          <input type="checkbox" name="shapes" class="shapes" value="all" id="cb-all" checked> <label for="cb-all">all Shapes</label>
        </span>

</div>

Upvotes: 3

Views: 27098

Answers (2)

Always Helping
Always Helping

Reputation: 14570

You can simply use querySelectorAll method and use forEach method to check which checkbox was clicked using addEventListener with change function in it.

Edit: If you want to get the value of checkbox when checked you can checked property and then display its value.

Live Demo

let allCheckBox = document.querySelectorAll('.shapes')

  allCheckBox.forEach((checkbox) => { 
  checkbox.addEventListener('change', (event) => {
    if (event.target.checked) {
      console.log(event.target.value)
    }
  })
})
<div class="js-shapes">
  <span class="ib">
    <input type="checkbox" name="shapes" class="shapes" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label>
  </span>
  <span class="ib">
    <input type="checkbox" name="shapes" class="shapes" value="diamond" id="cb-diamond"> <label for="cb-diamond">Diamond</label>
  </span>
  <span class="ib">
    <input type="checkbox" name="shapes" class="shapes" value="square" id="cb-square"> <label for="cb-square">Square</label>
  </span>
  <span class="ib">
    <input type="checkbox" name="shapes" class="shapes" value="triangle" id="cb-triangle"> <label for="cb-triangle">Triangle</label>
  </span>
  <span class="ib">
    <input type="checkbox" name="shapes" class="shapes" value="all" id="cb-all" checked> <label for="cb-all">all Shapes</label>
  </span>

</div>

Upvotes: 7

Mamun
Mamun

Reputation: 68933

getElementsByName() returns collection, you have to loop through them so that you can attach the event to them individually. Also, I will suggest you to use addEventListener() to attach event:

document.getElementsByName('shapes').forEach(function(chk){
  chk.addEventListener('click', function() {
    if(this.checked){
      console.log(this.value);
    }
  });
});
<div class="js-shapes">
  <span class="ib">
    <input type="checkbox" name="shapes" class="shapes" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label>
  </span>
  <span class="ib">
    <input type="checkbox" name="shapes" class="shapes" value="diamond" id="cb-diamond"> <label for="cb-diamond">Diamond</label>
  </span>
  <span class="ib">
    <input type="checkbox" name="shapes" class="shapes" value="square" id="cb-square"> <label for="cb-square">Square</label>
  </span>
  <span class="ib">
    <input type="checkbox" name="shapes" class="shapes" value="triangle" id="cb-triangle"> <label for="cb-triangle">Triangle</label>
  </span>
  <span class="ib">
    <input type="checkbox" name="shapes" class="shapes" value="all" id="cb-all" checked> <label for="cb-all">all Shapes</label>
  </span>
</div>

Upvotes: 3

Related Questions