Javascript復選框驗證不檢查是否已勾選

Question

我已經仔細研究了人們已經對此提出的許多問題，但是我找不到能夠幫助我的解決方案。

我是編程的初學者，所以對操作一無所知，我有四個復選框並提交表單，您必須至少選擇其中一個，但不會出現任何消息，並且無需提交表單即可被打勾的盒子之一。

這是我的代碼如下：

        <tr>
       <td align="right">
        <label for="erdbeersocken"><p>Erdbeersocken<sup>*</sup>:</label>
        <br>
        <label for="armstulpen">Armstulpen<sup>*</sup>:</label>
        <br>
        <label for="cupcakes">Cupcakes<sup>*</sup>:</label>
        <br>
        <label for="babykleidung">Babykleidung<sup>*</sup>:</label>
        <br>
       </td>       
       <td align="left">
<form action="../" onsubmit="return checkCheckBoxes(this);">
    <input type="CHECKBOX" name="CHECKBOX_1" value="Erdbeersocken">
    <br>
    <input type="CHECKBOX" name="CHECKBOX_2" value="Armstulpen">
    <br>
    <input type="CHECKBOX" name="CHECKBOX_3" value="Cupcakes">
    <br>
    <input type="CHECKBOX" name="CHECKBOX_4" value="Babykleidung">
    <br>
    <input type="SUBMIT" value="Submit!">
    </td>
</tr>   
</form>

<script type="text/javascript" language="JavaScript">
<!--
function checkCheckBoxes(theForm) {
    if (
    theForm.CHECKBOX_1.checked == false or
    theForm.CHECKBOX_2.checked == false or
    theForm.CHECKBOX_3.checked == false or
    theForm.CHECKBOX_4.checked == false)
    {
        alert ('You didn\'t choose any of the checkboxes!');
        return false;
    } else {    
        return true;
    }
}
//-->
</script>

看起來像：在此輸入文字（在此選中復選框）

我正在使用Notepadd ++，但似乎無法使用更高級的代碼，因此，如果有人可以通過簡化的JavaScript幫助我，我將不勝感激。 :)

Answer 1

  function checkCheckBoxes(theForm) {
     if ($("input[type='checkbox']:checked").length){
        return true;
     }else{
          alert ('You didn\'t choose any of the checkboxes!');
         return false;
     }
 }

Answer 2

對於您的表單，應為所有復選框賦予相同的名稱，但為每個復選框賦予不同的值-這將為您的復選框創建一個數組（如果您尚不知道數組是什么，請參閱響應底部的注釋）：

<input type="CHECKBOX" name="CHECKBOX" value="Erdbeersocken">
<br>
<input type="CHECKBOX" name="CHECKBOX" value="Armstulpen">
<br>
<input type="CHECKBOX" name="CHECKBOX" value="Cupcakes">
<br>
<input type="CHECKBOX" name="CHECKBOX" value="Babykleidung">

然后在您的Confirm Submit函數中，您要使用帶有兩個嵌套if語句的for循環來檢查是否已選中復選框。 我給你一個我最近做過的代碼的例子：

var interestsSelected = false;
for (var i = 0; i < document.forms[0].interests.length; ++i ) {
if (document.forms[0].interests[i].checked == true) {
interestsSelected = true;
break;
//code gives go ahead for submission because at least one checkbox has been checked
        }
    }
 if (interestsSelected !=true) {
        window.alert("You must select at least one hobby or interest");
        return false;
        //code Woot woot woot!  It all works!
    }

這是我的復選框的表單部分：

<input type="checkbox" name="interests" value="technology" />Technology <br />
<input type="checkbox" name="interests" value="arts" />The Arts <br />
<input type="checkbox" name="interests" value="music" />Music <br />
<input type="checkbox" name="interests" value="film" />Movies <br/> 
<input type="checkbox" name="interests" value="shopping" />Shopping <br />
<input type="checkbox" name="interests" value="outdoor" />Camping <br />
<input type="checkbox" name="interests" value="garden" />Gardening <br />

作為一個初學者:)如果所有內容都以盡可能簡單的語言拼寫出來，我經常會發現它很有用，因此我將在此處提供您可能會或可能不知道的一些詳細信息。

每當您創建表單時，都會自動創建該表單的數組（您不會在任何地方看到該數組，瀏覽器在訪問表單數據時會自動創建一個數組，但您可以（應該）在編碼中引用它）。因此，如果您的頁面上有一個表單，您將有一個數組form [0]，如果您的頁面上有兩個不同的表單，則第一個表單將有一個數組form [0]，第二個表單將有一個數組form [ 1]，每個都包含各自形式的所有元素。

如果將所有復選框都命名為相同的名稱，則實際上是在數組中創建一個數組-大的Mama Bear數組為forms [0]，而嵌套在其中的是Baby Bear數組（您的復選框名[]）。

為了引用Baby Bear數組，您必須首先確認Mama Bear數組：這就是為什么在我上面給出的代碼示例中，您看到“ document.forms [0]”（Mama Bear數組）后跟“”。興趣[i]”（嬰兒熊數組）。

希望這可以幫助：）

Answer 3

以HTML為例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<p>Select a box</p>
<form id="aform">
    <input type="checkbox">
    <input type="checkbox">
</form>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="test.js"></script>
</body>
</html>

以及JavaScript在其自己的文件中（始終將CSS和HTML中的代碼分開）

window.onload=function() {
    $("#aform").change(function () {
        alert('a box is checked');
    })
};

Javascript復選框驗證不檢查是否已勾選

問題描述

3 個解決方案

解決方案1
1 已采納 2015-05-30 12:40:19

解決方案2
0 2015-05-30 14:58:15

解決方案3
-1 2015-05-30 12:55:24

Javascript復選框驗證不檢查是否已勾選

問題描述

3 個解決方案

解決方案1 1 已采納 2015-05-30 12:40:19

解決方案2 0 2015-05-30 14:58:15

解決方案3 -1 2015-05-30 12:55:24

解決方案1
1 已采納 2015-05-30 12:40:19

解決方案2
0 2015-05-30 14:58:15

解決方案3
-1 2015-05-30 12:55:24