HTML5のみを使用して少なくとも1つのチェックボックスがオンになっていることを確認してください。

HTML5の検証機能を使用してフォームを作成しています。HTML5のみを使用して少なくとも1つのチェックボックスがオンになっていることを確認してください。

例：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Form Test</title> 
</head> 
<body> 
    <form id="form1" method="post" action=""> 
     <label><input type="checkbox" name="color1" value="1" required />Green</label><br /> 
     <label><input type="checkbox" name="color2" value="2" required />Red</label><br /> 
     <label><input type="checkbox" name="color3" value="3" required />Yellow</label><br /> 
     <label><input type="checkbox" name="color4" value="4" required />Blue</label><br /> 
     <input type="submit" /><input type="reset" /> 
    </form> 
</body> 
</html>

私は、少なくとも一つのチェックボックスがチェックされている場合、それは検証する必要があります。

"少なくとも1つのチェックボックスをオンにする必要があります。"

私はここに答えが見つかりました：
Jquery - check if at least one checkbox is checked
Check if at least one checkbox is checked using jQuery
Making sure at least one checkbox is checked
Submit form only if at least one checkbox is checked

しかし

だけHTML5を使用して作ることは可能ですJavaScriptやjQueryとなどを使用して？

出典

2017-02-17 Dadeke

ユーザーは、右、選択をすることがありますか？では、javascriptなしでユーザーの選択をアプリに通知する方法や、確認のためにサーバーにデータを送信する方法はありますか？だから、ええ、私はそれが可能ではないと思う... – mickdev

あなたはラベルの外に入力を移動することができます、私の答えをここで試すことができます：http://stackoverflow.com/a/33842776/3903374 –

@RickHitchcock、あなたのソリューションを使って。どうもありがとうございました。 :-D – Dadeke

これはできません。あなたは、チェックされたチェックボックスの数を数えるonchangeへの関数をJSバインディングでチェックする必要があります。 requiredチェックボックスの属性では、すべてのチェックボックスがチェックされている必要があります（ラジオの場合は1つの値のみをチェックする必要があります）。

出典

2017-02-17 23:03:55 RompePC

次のコードを試してみてください.......

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Form Test</title> 
 
</head> 
 
<body> 
 
    <form id="form1" method="post" action=""> 
 
     <label><input type="radio" name="color1" value="1" checked />Green</label><br /> 
 
     <label><input type="radio" name="color1" value="2" required />Red</label><br /> 
 
     <label><input type="radio" name="color1" value="3" required />Yellow</label><br /> 
 
     <label><input type="radio" name="color1" value="4" required />Blue</label><br /> 
 
     <input type="submit" /><input type="reset"/> 
 
    </form> 
 
</body> 
 
</html>

出典

2017-02-18 06:05:19 Momin

HTML5のみを使用して少なくとも1つのチェックボックスがオンになっていることを確認してください。

答えて

関連する問題