js checkbox get value without button clicked

Question

Is it possible to automatically execute the 'click' event, instead of pushing the button? I found some info about the 'change' event but don't know how to implement this properly in my code.

This is my code:

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Checkboxes</title> </head> <body> <p>Kies je gewenste optie:</p> <label for="c1"> <input type="checkbox" name="optie" value="vlaggen" id="c1">Vlaggen</label> <label for="c2"><input type="checkbox" name="optie" value="frontbache" id="c2">Frontbache</label> <label for="c3"><input type="checkbox" name="optie" value="achterbache" id="c3">Achterbache</label> <p> <button id="btn">Get Selected Colors</button> </p> <script> const btn = document.querySelector('#btn'); btn.addEventListener('click', (event) => { let checkboxes = document.querySelectorAll('input[name="optie"]:checked'); let values = []; checkboxes.forEach((checkbox) => { values.push(checkbox.value); }); if (values == "vlaggen") { alert("vlaggen is geselecteerd"); } else if (values == "frontbache") { alert("Frontbache is geselecteerd"); } else (values == "achterbache") { alert("Achterbache is geselecteerd"); } }); </script> </body> </html>

Answer 1

Use "change" event automatically excute alert without click button, i hope below code will help you:

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Checkboxes</title> </head> <body> <p>Kies je gewenste optie:</p> <form class="list"> <label for="c1"> <input type="checkbox" name="optie" value="vlaggen" id="c1">Vlaggen</label> <label for="c2"><input type="checkbox" name="optie" value="frontbache" id="c2">Frontbache</label> <label for="c3"><input type="checkbox" name="optie" value="achterbache" id="c3">Achterbache</label> <p> <button id="btn">Get Selected Colors</button> </p> </form> <script> const btn = document.querySelector('#btn'); const list = document.querySelector('.list'); list.addEventListener('change', (event) => { alert(`${event.target.value} is geselecteerd`) }) </script> </body> </html>

Answer 2

If I understand you correctly, you need to display the values without clicking the button (this is from the title of your question). So when the user checked the box, the result should be shown.

First Solution:

you can add in the input an onChange() , when the user checks any option, the result will then pop up.

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Checkboxes</title> </head> <body> <p>Kies je gewenste optie:</p> <label for="c1"> <input type="checkbox" name="optie" value="vlaggen" id="c1" onchange="Check(this)" >Vlaggen</label> <label for="c2"><input type="checkbox" name="optie" value="frontbache" id="c2" onchange="Check(this)">Frontbache</label> <label for="c3"><input type="checkbox" name="optie" value="achterbache" id="c3" onchange="Check(this)">Achterbache</label> <p> <button id="btn">Get Selected Colors</button> </p> <script> function Check(value) { let checkboxes = document.querySelectorAll('input[name="optie"]:checked'); let values = []; checkboxes.forEach((checkbox) => { values.push(checkbox.value); }); if (values == "vlaggen") { return alert("vlaggen is geselecteerd"); } else if (values == "frontbache") { return alert("Frontbache is geselecteerd"); } else (values == "achterbache") { return alert("Achterbache is geselecteerd"); } }; </script> </body> </html>

Second Solution:

you can also achieve this by jQuery

add in the head

src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <title>JavaScript Checkboxes</title> </head> <body> <p>Kies je gewenste optie:</p> <label for="c1"> <input type="checkbox" name="optie" value="vlaggen" id="c1" >Vlaggen</label> <label for="c2"><input type="checkbox" name="optie" value="frontbache" id="c2" >Frontbache</label> <label for="c3"><input type="checkbox" name="optie" value="achterbache" id="c3">Achterbache</label> <p> <button id="btn">Get Selected Colors</button> </p> <script> $ ("input:checkbox[name^='optie']").on('change', function () { var val = this.value; if (val == "vlaggen") { return alert("vlaggen is geselecteerd"); } else if (val == "frontbache") { return alert("Frontbache is geselecteerd"); } else (val == "achterbache") { return alert("Achterbache is geselecteerd"); } }) </script> </body> </html>

Answer 3

You can try this event

$( document.body ).click(function() {
 //Code here
});

I hope this can help you.

js checkbox get value without button clicked

Question

3 answers

solution1
1 2022-05-19 10:35:11

solution2
1 ACCPTED 2022-05-19 10:41:50

solution3
-2 2022-05-19 10:28:58

js checkbox get value without button clicked

Question

3 answers

solution1 1 2022-05-19 10:35:11

solution2 1 ACCPTED 2022-05-19 10:41:50

solution3 -2 2022-05-19 10:28:58

solution1
1 2022-05-19 10:35:11

solution2
1 ACCPTED 2022-05-19 10:41:50

solution3
-2 2022-05-19 10:28:58