我在網站上有一些復選框。如果用戶沒有勾選任何復選框，我想在頁面上顯示警告文本（不警告）。一旦選中其中一個復選框，此警告就會消失。我寫了以下代碼。這有助于我僅在控制臺上顯示。但是，我想獲得一些幫助以顯示在頁面本身上。任何幫助表示贊賞！PS：我在這方面很新。對不起，如果我的問題很愚蠢。
<script>
var array1 = []
const checkboxes=document.querySelectorAll('input[name=group1]:checked')
for (let i = 0; i < checkboxes.length; i ) {
array1.push(checkboxes[i].value)
}
if(array1.length == 0){
console.log("Please select at least one option to process further!")
}
</script>
uj5u.com熱心網友回復：
您<div id="warning"></div>在 html 中添加類似的內容。
和
document.querySelector('#warning').innerText = 'Please select at least one option';
在你的 JavaScript 中。只是玩弄它。
uj5u.com熱心網友回復：
// query and get elements
const checkboxs = document.querySelectorAll('input[type=checkbox]');
const messages = document.querySelectorAll('.warning');
// add event listener to each element
checkboxs.forEach(checkbox => {
checkbox.addEventListener("click", () => {
toggle(checkboxs, messages);
});
});
// show controlled elements
const show = (elems) => {
elems.forEach(elem =>
elem.style.display = 'block'
);
};
// hide controlled elements
const hide = (elems) => {
elems.forEach(elem =>
elem.style.display = 'none'
);
};
// toggle controlled element visibility according to checkbox state
const toggle = (checkboxs, controlled) => {
const emptys = [].filter.call(checkboxs, el => !el.checked);
if (emptys.length == checkboxs.length) {
show(controlled);
} else {
hide(controlled);
}
};.warning {
color: red;
}<input type='checkbox' value='1'>
<input type='checkbox' value='2'>
<input type='checkbox' value='3'>
<input type='checkbox' value='4'>
<p class='warning'>Please select at least one option to process further!</p>uj5u.com熱心網友回復：
假設您的 HTML 中有類似的內容
<input type="checkbox" name="group1" value="1">
<input type="checkbox" name="group1" value="2">
<input type="checkbox" name="group1" value="3">
<input type="checkbox" name="group1" value="4">
<input type="checkbox" name="group1" value="5">
<div id="warningDiv">Please select at least one option to process further!</div>
此時，您只需要執行以下操作：
<script>
if(document.querySelectorAll('input[name=group1]:checked').length == 0)
{
//Here you can do an alert or put the text on another html element like a div
//For example
alert("Please select at least one option to process further!")
}
</script>
":checked" 告訴選擇器只回傳被選中的那些。并且 querySelectorAll 回傳一個節點陣列，因此您可以輕松檢查長度以驗證是否選擇了任何節點。
如果您想驗證一個選定的、兩個選定的、一個以上的等，您可以沿著它播放。
如果將訊息繪制到另一個元素中，則需要添加 else 以洗掉訊息。
<script>
if(document.querySelectorAll('input[name=group1]:checked').length == 0)
{
//Here you can do an alert or put the text on another html element like a div
//For example
document.getElementById('warningDiv').innerHTML = "Please select at least one option to process further!";
}else{
document.getElementById('warningDiv').innerHTML = "";
}
</script>
如建議的那樣，您可以將其放入偵聽器中，或多或少像這樣：
function checkChecked()
{
if(document.querySelectorAll('input[name=group1]:checked').length == 0)
{
document.getElementById('warningDiv').innerHTML = "Please select at least one option to process further!";
}else{
document.getElementById('warningDiv').innerHTML = "";
}
}
checkChecked();
const allcheckboxes = document.querySelectorAll('input[name=group1]');
for(let checkboxinput in allcheckboxes)
{
if(typeof allcheckboxes[checkboxinput] == "object" && allcheckboxes[checkboxinput] != null)
{
allcheckboxes[checkboxinput].addEventListener('change', function(e) {
checkChecked()
});
}
}#warning {
color: red;
}<input type="checkbox" name="group1" value="1">
<input type="checkbox" name="group1" value="2">
<input type="checkbox" name="group1" value="3">
<input type="checkbox" name="group1" value="4">
<input type="checkbox" name="group1" value="5">
<div id="warningDiv">Please select at least one option to process further!</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/437234.html
標籤：javascript html