是否可以自動執行“點擊”事件，而不是按下按鈕？我找到了一些關于“更改”事件的資訊，但不知道如何在我的代碼中正確實作它。
這是我的代碼：
<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>uj5u.com熱心網友回復：
如果我理解正確，您需要在不單擊按鈕的情況下顯示值（這來自您問題的標題）。因此，當用戶選中該框時，應顯示結果。
第一個解決方案：
您可以添加inputan 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>uj5u.com熱心網友回復：
使用"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>uj5u.com熱心網友回復：
你可以試試這個活動
$( document.body ).click(function() {
//Code here
});
我希望這可以幫助你。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/478163.html
標籤：javascript dom dom 事件