Verify checked checkbox javascript

Question

I'm trying to update in "real time" if I check and uncheck in a list of checkboxs.

With this code:

window.onload = function () {
  var input = document.getElementById('listTaxi');

  function check() {
      var a = input.checked ? "checked" : "not checked";
      console.log(a);
  }
  input.onchange = check;
  check();
}

I can do this for one checkbox, but how can I make for multiple checkboxs? A list(div) of checkboxs?

Thanks!!

Use a class instead of id for all the checkbox. So that you can use document.getElementsByTagName. — Jose Hermosilla Rodrigo
– Jose Hermosilla Rodrigo, Commented May 26, 2016 at 17:09
Your code doesn't use jquery, but you tagged it as such. Do you want a jquery solution? — WillardSolutions
– WillardSolutions, Commented May 26, 2016 at 17:10

Andrei Todorut · Accepted Answer · 2016-05-26 17:20:43Z

1

Assign a class on all checkboxes you want to check if checked or not.

Checkboxes

<input type="checkbox" class="checkboxes" id="checkbox1"/>
<input type="checkbox" class="checkboxes" id="checkbox2"/>
<input type="checkbox" class="checkboxes" id="checkbox3"/>
<input type="checkbox" class="checkboxes" id="checkbox4"/>

Pure Javascript

// getting all checkboxes
var checkboxes = document.getElementsByClassName('checkboxes');

// go through all checkboxes
for(var i = 0; i <= checkboxes.length - 1; i++){
  checkboxes[i].onchange = function(e){
    alert('Element with id ' + e.target.getAttribute('id') + ' is checked ' +e.target.checked);
  }
}

Codepen http://codepen.io/todorutandrei/pen/rLBQOX

Or you can use JQUERY - is it more simple

$('.checkboxes').change(function(){
  var item = $(this);
  alert('Element with id ' + item.attr('id') + ' is ' + item.is(':checked'));
})

Codepen http://codepen.io/todorutandrei/pen/MegzwR

answered May 26, 2016 at 17:20

Andrei Todorut

4,5762 gold badges19 silver badges27 bronze badges

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

6 Comments

PRVS Over a year ago

stackoverflow.com/questions/13330202/… I use this to create dynamically the checkboxes, I try to put : checkbox.class="checkboxes" but if I try your Jquery not works.

Andrei Todorut Over a year ago

do you want to append checkboxes on DOM or to check a list of checkboxes is checked or not ?

PRVS Over a year ago

I want to display in a page and check

Andrei Todorut Over a year ago

i dont understand ... the checkboxes are added by javascript ? How do you want handle the check ? It's not by a simple click on checkbox ?

PRVS Over a year ago

Yes but I need to add the checkbox list in javascript (not need this way, it can be another way) . and it's a simple click in multiple checkboxes for example.

|

DanGrim83 · Accepted Answer · 2016-05-26 17:12:36Z

0

make them all the same class or give the all the same custom attribute

$(".classname") $("input[name='customName'])

Jquery will then select all with those

$("#id").change(function() {//if using class name or custom attr loop through the return elements and use a function below to handle the cases
 if($(this).is(":checked")) {
//code if checked
}
else{
//code if not checked       
}
});

answered May 26, 2016 at 17:12

DanGrim83

171 bronze badge

3 Comments

PRVS Over a year ago

I create the list dynamically in javascript. How can I add the classname to all ?

PRVS Over a year ago

I click in the checkboxes and I get "unchecked", "unchecked", "unchecked" and never "checked"

DanGrim83 Over a year ago

are you building the html for the list dynamically just add class="className" inside the tag when you build it

Collectives™ on Stack Overflow

Verify checked checkbox javascript

2 Answers 2

6 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related