How to check all checkboxes using javascript in onClick button?

Question

I am trying to make a button to check all checkboxes in a single line of a button onclick. Let's assume some checkboxes...

<input name="chk1" type="checkbox" class="post_dest_check" value="1" />Opt1
<input name="chk2" type="checkbox" class="post_dest_check" value="2" />Opt2
<input name="chk3" type="checkbox" class="post_dest_check" value="3" />Opt3

<button type="button" class="action" onClick="document.getElementsByClassName('post_dest_check').map((elm)=>{ elm.checked = true;});">Todos</button>

When clicked, will give me error

SyntaxError: Unexpected token ')'".

I also have tried with forEach.

Why? What's wrong? Is there a way to do this without heaving to write a script in the root to call from button?

Edit: I think I miss some explanation about why I wish to do like this, a script inside the onClick property. I have many forms that are loaded into the page as needed. By making a script in the page instead of in the form, I will have to create a "standard" to my forms, so the script can find the elements in the form every time is loaded. If I change one form, maybe I will have to change all of them and the script. Not a catastrophe, I just thought maybe a script inside the form can avoid this complexity - a built in automation. Of course, if possible and advisable.

Answer 1

There are a few things wrong here:

1. Do not use inline event attributes like onclick. Instead of using this 25+ year old technique that pre-dates standards and causes scalability and this binding issues, use the standard .addEventListener() that is separated from your HTML (which makes debugging easier by the way).

2. Do not use getElementsByClassName() as this returns a live node list that can cause performance issues, especially in looping situations.

3. .map() returns a new array, which in your use case is not needed and therefore a waste of resources. Instead, .forEach() is the better approach.

4. Don't bother with self-terminating XHTML syntax. It buys you nothing and can add confusion as to where it can/can't be used.

In the code below, "event delegation" is used so that you can have one event handler handle any set of checkboxes that are within their own form.

// Set up an event handler at a common ancestor of all the elements you wish to handle
document.querySelector("section").addEventListener("click", function(event){
  // Check to see if the event was triggered by an element you care to handle
  if(event.target.classList.contains("action")){
    // Get your reference to all the checkboxes in that form
    // (.closest searches for the nearest matching ancestor) and
    // loop over the checkboxes with the .forEach() method that works on node lists
    event.target.closest("form").querySelectorAll("input.post_dest_check").forEach(function(box){
      box.checked = true;
    });
  }
});

<section>
<fieldset>
  <legend>Form 1</legend>
  <form>
    <input name="chk1" type="checkbox" class="post_dest_check" value="1">Opt1
    <input name="chk2" type="checkbox" class="post_dest_check" value="2">Opt2
    <input name="chk3" type="checkbox" class="post_dest_check" value="3">Opt3
    <button type="button" class="action">Todos</button>
 </form>
</fieldset>

<fieldset>
  <legend>Form 2</legend>
  <form>
    <input name="chk1" type="checkbox" class="post_dest_check" value="1">Opt1
    <input name="chk2" type="checkbox" class="post_dest_check" value="2">Opt2
    <input name="chk3" type="checkbox" class="post_dest_check" value="3">Opt3
    <input name="chk3" type="checkbox" class="post_dest_check" value="3">Opt4    
    <button type="button" class="action">Todos</button>
 </form>
</fieldset>

<fieldset>
  <legend>Form 3</legend>
  <form>
    <input name="chk1" type="checkbox" class="post_dest_check" value="1">Opt1
    <input name="chk2" type="checkbox" class="post_dest_check" value="2">Opt2
    <button type="button" class="action">Todos</button>
 </form>
</fieldset>
</section>

Answer 2

How to check all checkboxes using javascript in onClick button?

for(el of document.getElementsByTagName('input')){if(el.type==="checkbox")el.checked=true;}

However, if you only want checkboxes with the class 'post_dest_check' you could be a little more specific.

for(el of document.getElementsByClassName('post_dest_check')){if(el.constructor.name==="HTMLInputElement"&&el.type==="checkbox")el.checked=true;}

I've only left out optional spaces as you've indicated you were going to use this in an inline onClick event handler.