js 复选框在没有单击按钮的情况下获取值

Question

是否可以自动执行 'click' 事件，而不是按下按钮？我找到了一些关于 'change' 事件的信息，但不知道如何在我的代码中正确实现它。

这是我的代码：

<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

你可以试试这个活动

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

希望对您有所帮助

Answer 2

使用"change"事件自动执行警报，无需点击按钮，希望以下代码对您有所帮助：

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

如果我理解正确，您需要在不单击按钮的情况下显示值（这是来自您的问题的标题）。所以当用户选中该框时，应该显示结果。

第一个解：

你可以在input中添加一个onChange()，当用户选中任何选项时，结果就会弹出。

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

第二种解法：

您也可以通过 jQuery

实现

加在头部

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>

js 复选框在没有单击按钮的情况下获取值

js checkbox get value without button clicked

javascript

dom

dom-events