[Edit]

JavaScript - oninput event for input checkbox element example

1 contributors

2 contributions

0 discussions

9 points

Created by:

Dollie-Rutledge

806

In this article, we would like to show you how to handle input event for input checkbox element in JavaScript.

1. `oninput` attribute example

Edit

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <label>
    <input type="checkbox" oninput="onInput(this)" /> Agreement
  </label>
  <script>
​
    function onInput(element) {
        console.log('Agreement changed to ' + element.checked + ' by oninput event.');
    }
​
  </script>
</body>
</html>

Auto running

2. `oninput` property example

Edit

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <label>
    <input id="agreement" type="checkbox" /> Agreement
  </label>
  <script>
​
    var agreement = document.getElementById('agreement');
​
    agreement.oninput = function(element) {
        console.log('Agreement changed to ' + agreement.checked + ' by oninput event.');
    };
​
  </script>
</body>
</html>

Auto running

3. `addEventListener` method example

Edit

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <label>
    <input id="agreement" type="checkbox" /> Agreement
  </label>
  <script>
​
    var agreement = document.getElementById('agreement');
​
    agreement.addEventListener('input', function(element) {
        console.log('Agreement changed to ' + agreement.checked + ' by input event.');
    });
​
  </script>
</body>
</html>