Append Checkbox Log For Free

To get the checkbox value when it is checked or unchecked use the onchange event by calling a method in onchange event using lambda expression and passing the checkbox value to it.

Store all selected checkbox value in array using for loop. Inside this function, create a new blank array ( let arr = [] ). Then, store the selected checkbox into a variable using querySelectorAll() method. The querySelector() method returns the first element that matches the specified selectors.

Set an onChange event listener on the input checkbox. In the listener, use the event object's target. checked property to check if the checkbox is checked. Store the checked value in a state variable to be able to check whether the checkbox is checked from outside the event listener.

Different JavaScript codes to get marked checkboxes value <script> document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } }

Different JavaScript codes to get marked checkboxes value <script> document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } }

Note: Unlike other input controls, a checkbox's value is only included in the submitted data if the checkbox is currently checked . If it is, then the value of the checkbox's value attribute is reported as the input's value, or on if no value is set.

Approach: The approach is to use the ng-checked directive to check the checkbox in the DOM. In the first example, a single checkbox is checked by the button and In the second example, multiple checkboxes are checked by the button. The ng-model directive is used to bind the checkboxes.