js checkbox get value without button clicked-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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 >
    <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>

CodePudding user response：

You can try this event

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

I hope this can help you.