当前位置： 文江博客话题详情

是否可以自动执行单击＆＃x27;事件，而不是按下按钮？

发布于 2025-01-30 07:23:12 字数 1692 浏览 4 评论 0原文

是否可以自动执行“单击”事件，而不是按下按钮？ 我找到了一些有关“变更”事件的信息，但不知道如何在我的代码中正确实现此信息。

这是我的代码：

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

原文

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

疯到世界奔溃 2025-02-06 07:23:12

如果我正确理解您，则需要在不单击按钮的情况下显示值（这是您问题的标题）。因此，当用户检查框时，应显示结果。

第一个解决方案：

您可以添加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>

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>

回复 原文
戏舞 2025-02-06 07:23:12

使用“更改”事件无需单击按钮即可自动换取警报，我希望以下代码能为您提供帮助：

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

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>

回复 原文
旧时模样 2025-02-06 07:23:12

您可以尝试此活动，

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

希望这可以为您提供帮助。

You can try this event

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

I hope this can help you.

回复 原文
~没有更多了~

关于作者

吖咩

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文