Javascriptを使用してチェックボックスを検証する方法

-5

チェックボックスの検証に問題があります。私は常にgoogle-ingしていますが、私が見つけたソリューションのほとんどはjQuery（わかりません）または動作しません。Javascriptを使用してチェックボックスを検証する方法

<body> 
<form action="" method="POST" id="myForm" onSubmit="return validateCheckBox()"> 
    <input type="checkbox" value="beyanetu_1" name="foods[]" > 
    <input type="checkbox" value="beyanetu_2" name="foods[]" > 
    <input type="checkbox" value="beyanetu_3" name="foods[]" > 
    <input type="checkbox" value="beyanetu_4" name="foods[]" > 
    <input type="checkbox" value="beyanetu_5" name="foods[]" > 
    <input type="checkbox" value="beyanetu_6" name="foods[]" > 

    <input type="image" src="logo/order-online_4.png" height="50px" width="100px" > 
</form>  
<script> 
    function validateCheckBox(){ 
       //I want to know how to retrieve the data and 
       //check if at least one is checked 
      } 
</script> 
</body>

これは重複した質問ではなく、この記事の上にリンクされているものはJQueryであり、わからないと言いました。

EDIt：私は正直なところ、あなたがこれを落としている理由は分かりません！

出典

2017-08-14 Lul Gate

、チェックボックスが（ 'を使用して：checked'セレクタ）わずかに奇数のように動作を確認されているかどうかを決定する：/ [シンプルなJavaScriptのチェックボックス検証]（HTTPSの –

可能な複製を/stackoverflow.com/questions/11234622/simple-javascript-checkbox-validation） – Sand

[ページのチェックボックスがすべてオンになっているかどうかを確認するにはどうすればよいですか？]（https://stackoverflow.com/questions/9119407）/on-check-if-any-check-all-on-the-page-are-checkedがチェックされています） – Niklas

-2

はtypeチェックボックスのinputはcheckedと呼ばれるプロパティにそのチェックされた状態を保持します。だから、私はformelementsをループし、既にチェックされているチェックボックスがあるかどうかを確認します。明らかに、同じフォームに複数のチェックボックスグループがある場合は、名前に基づいてチェックボックスグループごとにチェックを強化する必要があります。 jQueryので

function validateCheckBox(form) { 
 
    var tmp = false; 
 
    for (var i in form.elements) { 
 
    var el = form.elements[i]; 
 

 
    if (el.type == 'checkbox' && el.checked) tmp = true; 
 
    } 
 
    console.log(tmp); 
 
    return tmp; 
 

 
}

<form action="" method="POST" id="myForm" onSubmit="return validateCheckBox(this);"> 
 
    <input type="checkbox" value="beyanetu_1" name="foods[]"> 
 
    <input type="checkbox" value="beyanetu_2" name="foods[]"> 
 
    <input type="checkbox" value="beyanetu_3" name="foods[]"> 
 
    <input type="checkbox" value="beyanetu_4" name="foods[]"> 
 
    <input type="checkbox" value="beyanetu_5" name="foods[]"> 
 
    <input type="checkbox" value="beyanetu_6" name="foods[]"> 
 

 
    <input type="image" src="logo/order-online_4.png" height="50px" width="100px"> 
 
</form>

出典

2017-08-14 09:09:31 bluehipy

で未定義ののプロパティ 'checkbox'を読み込めませんか？ –

onSubmitハンドラから渡された 'this'パラメータ' onSubmit = "return validateCheckBox（this）;" – bluehipy

ありがとうございます。あなたのコードは実際に働いた。 –

-2

各チェックボックスにIDを追加する必要があります。ここで提案固定：

<body> 
<form action="" method="POST" id="myForm" onSubmit="return validateCheckBox()"> 
    <input type="checkbox" value="beyanetu_1" name="foods[]" > 
    <input type="checkbox" value="beyanetu_2" name="foods[]" > 
    <input type="checkbox" value="beyanetu_3" name="foods[]" > 
    <input type="checkbox" value="beyanetu_4" name="foods[]" > 
    <input type="checkbox" value="beyanetu_5" name="foods[]" > 
    <input type="checkbox" value="beyanetu_6" name="foods[]" > 

    <input type="image" src="logo/order-online_4.png" height="50px" width="100px" > 
</form>  
<script> 
    function validateCheckBox(){return this.form.checkbox.checked;} 
</script> 
</body>

出典

2017-08-14 09:07:35

それぞれにIDを与え、次に明示的に1つずつアドレス指定することは、この問題に対する恐ろしいアプローチです。あなたのコードはとにかく動作しません。あなたは比較が必要な課題を持っています。 – Quentin

それは分かりましたが、それはちょうど5つの要素ですが、それは恐ろしいアプローチである点です。それはパフォーマンスか何ですか？ –

それは肥大し、維持するのがより困難です。 – Quentin

Javascriptを使用してチェックボックスを検証する方法

答えて

関連する問題