使用javascript检查复选框列表中是否已选中至少一个项目

时间:2015-04-16 23:42:08

标签: javascript validation checkbox alert

我想让我的代码检查是否在复选框列表中选中了一个或多个复选框。如果没有选中复选框,那么我想要一个window.alert弹出“请选择至少一个兴趣”。目前所做的一切都是提醒,即使您选中了一个方框,也没有检查任何内容。

我的代码如下:

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

注意:标题中的额外代码用于提交输入到显示已提交内容的页面的所有数据。这是我的第一篇文章,请随时告诉我其他信息可能会有什么帮助。谢谢!

2 个答案:

答案 0 :(得分:1)

在表单下方添加脚本标记,您可以使用this将表单传递给您的回调。使用querySelector :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.

答案 1 :(得分:0)

使用jQuery,你可以这样做:

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