Question 279851 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to check all checkboxes on one field? using JS

I have one field that has 5-6 checkboxes (and will increased more in the future), this field name email_notification, here’s the code that i find on google to automatic check all the check boxes on event Form – On Load.

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(function(checkbox) {
    checkbox.checked = true;
});

When I run the code, it will auto check all my checkboxes on field email_notification, it also check all checkboxes on other field. I just want only one field to automatically check all the checkboxes. Is there any clue to change the syntax? Thank you for helping.

I’m not familiar with Javascript, and I’ve been googling about this on one week but didn’t find any clue.

Tags:

2

Answers


  1. 0

    Here is your answer . I think it might help you to solve your question.

    <p>Select your favorite colors:</p>
<label for="c1"> <input type="checkbox" name="color" value="red" id="c1">Red</label>
<label for="c2"><input type="checkbox" name="color" value="green" id="c2"> Green</label>
<label for="c3"><input type="checkbox" name="color" value="blue" id="c3">Blue</label>
<p>
<button id="button2">check/uncheck all</button>

<script>
    // check function
    function check(checked = true){
        const checkboxes = document.querySelectorAll('input[name="color"]');
        checkboxes.forEach(checkbox =>{
            checkbox.checked = checked;
        })
    }

    // check all checkboxes
    function checkAll(){
        check();
        this.onclick = uncheckAll;
    }

    // uncheck all
    function uncheckAll(){
        check(false);
        this.onclick = checkAll;
    }

    const button2 = document.querySelector('#button2');
    button2.onclick = checkAll;
</script>
    Login or Signup to reply.
  2. 0

    I’m using web development tool (Scriptcase).

    Use sc_form object to interact with the form and its elements. If you want to select all checkboxes within a specific field, you can use the sc_form.getField method to get the field, and then use the getValues method to get all the checkboxes within that field.

    Example;

    var field = sc_form.getField('email_notification');
var checkboxes = field.getValues();
checkboxes.forEach(function(checkbox) {
   checkbox.checked = true;
});

    sc_form.getField('email_notification') gets the field with the name email_notification. field.getValues() gets all the checkboxes within that field. The forEach loop then checks all the checkboxes.

    Since you’re running this after the form has been loaded, make sure it’s inside the function like;

    sc_form.onLoad = function() {
   var field = sc_form.getField('email_notification');
   var checkboxes = field.getValues();
   checkboxes.forEach(function(checkbox) {
       checkbox.checked = true;
   });
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search