This question already has answers here :
As far as you use JQuery this code may be more preferable
var checkboxes = $('[name="sel[]"]');
//listen all checkboxes change event
checkboxes.on('change', function(){
var id = this.value; // id equals j in your code
$.post("/php/ses.php", { data: this.checked ? id: -id }); // send data id if checked and -id if not checked
});
How to pass Checkbox value 0 if not checked and 1 if checked using , How do you get the values of selected checkboxes in a group using Javascript? The loop is the simplest one conceptually. You can call querySelectorAll () on all elements with a specific class, then use forEach () to iterate on them: document.querySelectorAll('.some-class').forEach(item => { item.addEventListener('click', event => { //handle click }) }) If you don’t have a common class for your elements you can build an array on the fly:
You could use checkboxes data value for your data instead of keeping a separate instance of it.
var arr = document.getElementsByName("sel[]");
for (j = 0; j < arr.length; j++){
arr[j].addEventListener('change', (event) => {
if (event.target.checked) {
//$.post("/php/ses.php", {data:data});
console.log({data: parseInt(event.target.value)});
}else {
//$.post("/php/ses.php", {data:data});
console.log({data: -parseInt(event.target.value)});
}
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<input type="checkbox" name="sel[]" id="1" value="1">
<input type="checkbox" name="sel[]" id="2" value="2">
<input type="checkbox" name="sel[]" id="3" value="3">
<input type="checkbox" name="sel[]" id="4" value="4">
<input type="checkbox" name="sel[]" id="5" value="5">
<input type="checkbox" name="sel[]" id="6" value="6">
</body>
</html>
Better way to do this - JavaScript, How do you pass checkbox value 0 if not checked and 1 if checked? Add event listener for loop problem in JavaScript. March 06, 2018. In web development class today, many of our students faced a problem adding event listeners to an array of HTML elements (ok, DOM nodes to be specific). Imagine you have a grid of 9 buttons forming a tic tac toe board in your HTML page.
While the answer by Prokhor Orlov is correct I want to explain what is wrong in OP. At the moment when event handler fires the for loop iterator is already ran out of the loop and has its max value. This error is very common in beginners and the question was asked 100+ times. The solution is also well known, use closure in the loop. Something like this.
for (i = 0; i < arr.length; i++) {
(function(j){
checkboxes[j] = document.getElementById(copy[j]);
checkboxes[j].addEventListener('change', (event) => {
if (event.target.checked) {
data = j;
$.post("/php/ses.php", {
data: data
});
} else {
data = (-1) * j;
$.post("/php/ses.php", {
data: data
});
}
});
})(i);
}
Disclaimer : This is not recommended code in this case
Why you shouldn't attach event listeners in a for loop with vanilla , :sunny: I'm practising JS with this To do list exercise from edX (DEV279x) addEventListener("click", function(){ addTask(); }) // listen for clicks on and then loop through it with (checkBox[i].checked) => { argument[i].style. javascript forEach - add addEventListener on all buttons I'm not so skilled with javascript so I'm looking for a little help. // 'this' refers to the current
Handling Checkboxes Onclick with JavaScript, To add the same event listener to multiple elements, you also cannot just use Why you shouldn't attach event listeners in a for loop with vanilla JavaScript addEventListener('click', function (event) { console.log('2', btns[i]); Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions, and Opera 6.0 and earlier versions. However, for these specific browser versions, you can use the attachEvent() method to attach event handlers (see "More Examples" below for a cross-browser solution).
Check all: A JavaScript pattern to check a group of checkboxes , How to access checked and value properties of a checkbox and group of checkboxes Next we use a for loop to inspect the type property of each of the input The addEventListener () method attaches an event handler to an element without overwriting existing event handlers. You can add many event handlers to one element. You can add many event handlers of the same type to one element, i.e two "click" events. You can add event listeners to any DOM object not only HTML elements. i.e the window object.
JavaScript Checkbox, Check all: A JavaScript pattern to check a group of checkboxes //create a counter for the loop var i; //loop through each check-all group for ( i The addEventListener call should look like: elem.addEventListener('click', myFunction, false) and classname is a NodeList type. Need to loop over all the elements and attach the listener to each one in the list. – Joey Guerra Mar 23 '15 at 3:03
Comments why not attach a single event handler to a parent element? The change event will bubble. . Also, might be better to use event.target.id or .value to get your index. It's the scope of the j variable: by the time the events fire, j will always have iterated to its max value. You are quicker ;)
