使用 javascript 检查是否至少选中了复选框列表中的一项

Question

我想让我的代码检查是否在复选框列表中选中了一个或多个复选框。如果没有选中复选框，那么我想要一个 window.alert 弹出说 "please select at least one interest"。目前它所做的只是警告没有检查任何内容，即使您选中了一个框。

我的代码如下：

<!DOCTYPE HTML>
<html>
<head>
<title>Web Site Registration Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function confirmSubmit(){
    if(document.forms[0].interests.checked) {
         {window.alert("Thank you");}
    } else {
    {window.alert("Select at least one preference");
}
    return false;}
return true;
}

</script>
</head>
<body>
<h1>Web Site Registration Form</h1>
<h2>Personal Information</h2>
<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit()">

   <p>Select areas of interest (select at least one)</p>
    <p><input type="checkbox" name="interests"
         value="entertainment">Entertainment<br />
    <input type="checkbox" name="interests"
         value="business">Business<br />
    <input type="checkbox" name="interests"
         value="music">Music<br />
    <input type="checkbox" name="interests"
         value="shopping">Shopping<br />
    <input type="checkbox" name="interests"
         value="travel">Travel</p>
    <p><input type="submit"></p>
    </form>
</body>
</html>

注意：header 中的额外代码用于将输入的所有数据提交到显示已提交内容的页面。这是我的第一个 post，请随时告诉我其他可能有帮助的信息。谢谢！

Answer 1

在表单下方添加您的脚本标签，您可以使用this将表单传递给您的回调。使用 querySelector for :checked 在表单内搜索选中的输入。

<script type="text/javascript">
function confirmSubmit(form){
    if(form.querySelector(":checked")) {
        window.alert("Thank you");
        return true;
    } else {
        window.alert("Select at least one preference");
        return false;
    }
}

</script>

您可以通过更新 onclick 侦听器将表单传递给您的回调；

<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded" 
onsubmit="return confirmSubmit(this)">

这是fiddle.

Answer 2

使用 jQuery 你可以这样做：

function confirmSubmit(){
$('input').each(function(index, item) {
   if(item.checked){
     return true;
   }
});
}

使用 javascript 检查是否至少选中了复选框列表中的一项

Checking to see if atleast one item has been selected in a checkbox list using javascript

javascript

validation

checkbox

alert