Javascript on change for checkbox

Question

I am changing state of check boxes with following code:

document.getElementById('checkall').onclick = function(){
     inputs = VARIABLE.querySelectorAll('input[type=checkbox]');
     for(i=0; i<inputs.length; i++) 
          inputs[i].checked = true; 
}

This section work fine.

and i am creating checkboxes with(these codes call on for):

mainFrameInput = document.createElement("input"); mainFrameInput.className = "item"; mainFrameInput.style.display='none'; mainFrameInput.setAttribute('type', 'checkbox'); mainFrameInput.setAttribute('id', GnId);

this section work fine too

At this time i want to have a function which run when check boxes changed because it can change on several way.

I am creating check boxes with JavaScript and want to handle onchange with JavaScript NOT JQUERY.

I tested CHECKBOX_VARIABLE.onchange = function{} but it does not call when i change with above code and just CHECKBOX_VARIABLE.onclick work when i click on each checkbox.

I found solution and posted as answer.

Answer 1

one way to do this is by using the native onchange attribute and give it a function

<select id="mySelect" onchange="alert('change')">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>

here's a fiddle showing this

https://jsfiddle.net/r4aj8zh2/

Answer 2

You can do this like that:

HTML:

<button id="checkall">check all</button><br>
a: <input type="checkbox" name="a" value="a"><br>
b: <input type="checkbox" name="b" value="b"><br>
c: <input type="checkbox" name="c" value="c">

JavaScript:

var inputs = document.querySelectorAll('input[type=checkbox]');

document.getElementById('checkall').onclick = function(){
     for(var i=0; i<inputs.length; i++) {
          inputs[i].checked = true; 
     }
     somethingChanged();
}

for(var i=0; i<inputs.length; i++) {
    inputs[i].addEventListener('change', somethingChanged);
}

function somethingChanged(evt) {
  if (evt) {
    console.log(evt.srcElement.name, 'changed');
  }
  else {
    console.log('all changed');
  }
}

Fiddle: https://jsfiddle.net/1m3rcvw9/

Explanation: When I tried it I could reproduce your problem - the change listener was not called when clicking the check-all button. So my idea is to just call the function manually after a click occurs on check-all. You can even distinguish between single checkbox clicks and check-all clicks by checking if there is a event-parameter.

EDIT: If you dynamically add <input> tags then just add the somethingChanged change listener right after creation of new elements and update the inputs variable by reselecting all checkboxes:

mainFrameInput = document.createElement("input");  
mainFrameInput.addEventListener('change', somethingChanged);
// ... insert the element into DOM here
inputs = document.querySelectorAll('input[type=checkbox]');

Answer 3

You can addEventListener to these checkboxes

   // Get all checkbox. Use more specific selector using name or class
   var getAllCheckBox = document.querySelector('input[type=checkbox]');
    // Adding event listener change to each checkbox
    getAllCheckBox.addEventListener('change', function (event) {
        if (getAllCheckBox.checked) {
            // do something if checked
        } else {
            // do something else otherwise
        }
    });

Answer 4

Add event listener to element when element is created. Make sure the D is lower case d at .getElementById VARIABLE = document.getElementById('#div-id');

mainFrameInput = document.createElement("input");
mainFrameInput.addEventListener("change", function() {
  // do stuff
})

Answer 5

FINALLY I RESOLVED THE ISSUE:

first of all i developed a function:

    function fireEvent(element,event){
    if (document.createEventObject){
        var evt = document.createEventObject();
        return element.fireEvent('on'+event,evt)
    }
    else{
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true ); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}

and called that when changed state of check box:

fireEvent(inputs[i],'change');

and added on change event when creating check boxes:

mainFrameInput.onchange = function(){ 
        if (this.checked)
        {
            console.log('checked');
        }
        else
        {
            console.log('un checked');
        }
    }