チェックボックスのグループにHTML5の「必須」属性を使用していますか？

HTML5をサポートする新しいブラウザー（FireFox 4など）を使用する場合。
フォームフィールドには属性がありますrequired='required'。
フォームフィールドは空/空白です。
そして送信ボタンがクリックされた;
ブラウザは、「必須」フィールドが空であることを検出し、フォームを送信しません。
代わりに、ブラウザにユーザーにフィールドにテキストを入力するように求めるヒントが表示されます。

これで、単一のテキストフィールドの代わりに、チェックボックスのグループができました。そのうちの1つはユーザーがチェック/選択する必要があります。

requiredこのチェックボックスのグループでHTML5 属性を使用するにはどうすればよいですか？（チェックする必要があるチェックボックスは1つだけなのでrequired、すべてのチェックボックスに属性を設定することはできません）

ps。必要であれば、私はsimple_formを使用しています。

更新

でしHTML 5 multiple属性は、ここで役に立ちますか？私の質問に似た何かをするために誰かがそれを以前に使用しましたか？

更新

表示されます：この機能はHTML5の仕様によってサポートされていないこと ISSUE-111を：@入力し@type =チェックボックスの平均必要は何？

（問題のステータス：問題は先入観なしに終了とマークされています。）そして、ここに説明があります。

アップデート2

これは古い質問ですが、質問の元々の目的は、JavaScriptを使用せずに、つまりHTML5の方法を使用して上記を実行できるようにすることであると明確にしたかったのです。振り返ってみると、「JavaScriptなし」をもっと不明瞭にする必要がありました。

残念ながら、HTML5にはそれを実行するための特別な方法はありません。

ただし、jQueryを使用すると、チェックボックスグループに少なくとも1つのチェック済み要素があるかどうかを簡単に制御できます。

次のDOMスニペットを検討してください。

<div class="checkbox-group required">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
</div>

次の式を使用できます。

$('div.checkbox-group.required :checkbox:checked').length > 0

true少なくとも1つの要素がチェックされている場合に返されます。これに基づいて、検証チェックを実装できます。

その簡単なトリック。これはrequired、いずれかがチェックされている場合にプロパティを変更することによってhtml5検証を悪用できるjQueryコードです。以下はあなたのhtmlコードです（グループのすべての要素にrequiredを必ず追加してください。）

<input type="checkbox" name="option[]" id="option-1" value="option1" required/> Option 1
<input type="checkbox" name="option[]" id="option-2" value="option2" required/> Option 2
<input type="checkbox" name="option[]" id="option-3" value="option3" required/> Option 3
<input type="checkbox" name="option[]" id="option-4" value="option4" required/> Option 4
<input type="checkbox" name="option[]" id="option-5" value="option5" required/> Option 5

次のjQueryスクリプトは、いずれかが選択されている場合、以降の検証チェックを無効にします。名前要素を使用して選択します。

$cbx_group = $("input:checkbox[name='option[]']");
$cbx_group = $("input:checkbox[id^='option-']"); // name is not always helpful ;)

$cbx_group.prop('required', true);
if($cbx_group.is(":checked")){
  $cbx_group.prop('required', false);
}

ここで小さな落とし穴：html5検証を使用しているので、検証される前、つまりフォーム送信前にこれを実行してください。

// but this might not work as expected
$('form').submit(function(){
  // code goes here
});

// So, better USE THIS INSTEAD:
$('button[type="submit"]').on('click', function() {
  // skipping validation part mentioned above
});

これを行う標準のHTML5の方法はないと思いますが、jQueryライブラリを使用してもかまわない場合は、webshimsを使用して「チェックボックスグループ」の検証を達成できました。 group-required "検証機能。

group-requiredのドキュメントはこう言います：

チェックボックスに「グループ必須」クラスがある場合、フォーム/ドキュメント内の同じ名前のチェックボックスの少なくとも1つをチェックする必要があります。

そして、これはあなたがそれをどのように使用するかの例です：

<input name="checkbox-group" type="checkbox" class="group-required" id="checkbox-group-id" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />

私は主にwebshimsを使用してHTML5機能をポリフィルしますが、このようなオプションの拡張機能もいくつかあります。

独自のカスタム妥当性ルールを作成することもできます。たとえば、入力の名前に基づいていないチェックボックスグループを作成する必要があったので、そのための独自の妥当性ルールを記述しました ...

HTML5は、チェックボックスグループで1つまたは少なくとも1つのチェックボックスのみをオンにする必要があることを直接サポートしていません。これがJavaScriptを使用した私の解決策です：

HTML

<input class='acb' type='checkbox' name='acheckbox[]' value='1' onclick='deRequire("acb")' required> One
<input class='acb' type='checkbox' name='acheckbox[]' value='2' onclick='deRequire("acb")' required> Two

ジャバスクリプト

       function deRequireCb(elClass) {
            el=document.getElementsByClassName(elClass);

            var atLeastOneChecked=false;//at least one cb is checked
            for (i=0; i<el.length; i++) {
                if (el[i].checked === true) {
                    atLeastOneChecked=true;
                }
            }

            if (atLeastOneChecked === true) {
                for (i=0; i<el.length; i++) {
                    el[i].required = false;
                }
            } else {
                for (i=0; i<el.length; i++) {
                    el[i].required = true;
                }
            }
        }

JavaScriptは、少なくとも1つのチェックボックスがオンになっていることを確認してから、チェックボックスグループ全体を不要にします。チェックされている1つのチェックボックスがオフになると、すべてのチェックボックスが再び必要になります。

私は同じ問題を抱えていて、私の解決策はこれでした：

HTML：

<form id="processForm.php" action="post">
  <div class="input check_boxes required wish_payment_type">
    <div class="wish_payment_type">
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_1">
        <input class="check_boxes required" id="wish_payment_type_1" name="wish[payment_type][]" type="checkbox" value="1">Foo
      </label>
    </span>
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_2">
        <input class="check_boxes required" id="wish_payment_type_2" name="wish[payment_type][]" type="checkbox" value="2">Bar
      </label>
    </span>
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_3">
        <input class="check_boxes required" id="wish_payment_type_3" name="wish[payment_type][]" type="checkbox" value="3">Buzz
      </label>

      <input id='submit' type="submit" value="Submit">
  </div>
</form>

JS：

var verifyPaymentType = function () {
  var checkboxes = $('.wish_payment_type .checkbox');
  var inputs = checkboxes.find('input');
  var first = inputs.first()[0];

  inputs.on('change', function () {
    this.setCustomValidity('');
  });

  first.setCustomValidity(checkboxes.find('input:checked').length === 0 ? 'Choose one' : '');
}

$('#submit').click(verifyPaymentType);

https://jsfiddle.net/oywLo5z4/

@thegaurawと@Brian Woodwardからの回答に触発されて、カスタム検証エラーメッセージを含め、JQueryユーザーのためにまとめました。

$cbx_group = $("input:checkbox[name^='group']");
$cbx_group.on("click", function() {
    if ($cbx_group.is(":checked")) {
        // checkboxes become unrequired as long as one is checked
        $cbx_group.prop("required", false).each(function() {
            this.setCustomValidity("");
        });
    } else {
        // require checkboxes and set custom validation error message
        $cbx_group.prop("required", true).each(function() {
            this.setCustomValidity("Please select at least one checkbox.");
        });
    }
});

私のフォームには、デフォルトでいくつかのチェックボックスがオンになっていることに注意してください。

JavaScript / JQueryウィザードの一部がそれをさらに厳しくする可能性がありますか？

html5でもこれを簡単に行うことができます。jqueryコードを追加するだけです

デモ

HTML

<form>
 <div class="form-group options">
   <input type="checkbox" name="type[]" value="A" required /> A
   <input type="checkbox" name="type[]" value="B" required /> B
   <input type="checkbox" name="type[]" value="C" required /> C
   <input type="submit">
 </div>
</form>

jquery

$(function(){
    var requiredCheckboxes = $('.options :checkbox[required]');
    requiredCheckboxes.change(function(){
        if(requiredCheckboxes.is(':checked')) {
            requiredCheckboxes.removeAttr('required');
        } else {
            requiredCheckboxes.attr('required', 'required');
        }
    });
});

チェックボックスのグループに非表示のラジオを追加しました。少なくとも1つのオプションをオンにすると、無線もオンに設定されます。すべてのオプションがキャンセルされると、無線もキャンセルするように設定されます。したがって、フォームでは「少なくとも1つのオプションを確認してください」というラジオプロンプトが使用されます。

• あなたは使用することはできませんdisplay: noneラジオが集中することはできませんので。
• ラジオのサイズをチェックボックス全体のサイズと同じにしているので、プロンプトが表示されたときにわかりやすくなります。

HTML

<form>
  <div class="checkboxs-wrapper">
    <input id="radio-for-checkboxes" type="radio" name="radio-for-required-checkboxes" required/>
    <input type="checkbox" name="option[]" value="option1"/>
    <input type="checkbox" name="option[]" value="option2"/>
    <input type="checkbox" name="option[]" value="option3"/>
  </div>
  <input type="submit" value="submit"/>
</form>

JavaScript

var inputs = document.querySelectorAll('[name="option[]"]')
var radioForCheckboxes = document.getElementById('radio-for-checkboxes')
function checkCheckboxes () {
    var isAtLeastOneServiceSelected = false;
    for(var i = inputs.length-1; i >= 0; --i) {
        if (inputs[i].checked) isAtLeastOneCheckboxSelected = true;
    }
    radioForCheckboxes.checked = isAtLeastOneCheckboxSelected
}
for(var i = inputs.length-1; i >= 0; --i) {
    inputs[i].addEventListener('change', checkCheckboxes)
}

CSS

.checkboxs-wrapper {
  position: relative;
}
.checkboxs-wrapper input[name="radio-for-required-checkboxes"] {
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    pointer-events: none;
    border: none;
    background: none;
}

https://jsfiddle.net/codus/q6ngpjyc/9/

こんにちは、チェックボックスのグループに追加されたテキストボックスを使用してください。チェックボックスをクリックすると、そのテキストボックスに値が入力されます。そのテキストボックスは必須で、読み取り専用にしてください。

ここにはたくさんの解決策があることに気づきましたが、それらのどれもが私が持っているすべての要件を満たしていませんでした：

• カスタムコーディングは不要
• ページの読み込み時にコードが機能する
• カスタムクラスは不要（チェックボックスまたはその親）
• nameAPIを介してGithubの問題を送信するために同じものを共有するためにいくつかのチェックボックスリストが必要であり、その名前label[]を使用して多くのフォームフィールド（2つのチェックボックスリストといくつかの選択とテキストボックス）にラベルを割り当てました-共有せずにこれを達成できたとしたら同じ名前ですが、試すことにしましたが、うまくいきました。

これに対する唯一の要件はjQueryです。これを@ewallの優れたソリューションと組み合わせて、カスタム検証エラーメッセージを追加できます。

/* required checkboxes */
(function ($) {
	$(function () {
		var $requiredCheckboxes = $("input[type='checkbox'][required]");

		/* init all checkbox lists */
		$requiredCheckboxes.each(function (i, el) {
			//this could easily be changed to suit different parent containers
			var $checkboxList = $(this).closest("div, span, p, ul, td");

			if (!$checkboxList.hasClass("requiredCheckboxList"))
				$checkboxList.addClass("requiredCheckboxList");
		});

		var $requiredCheckboxLists = $(".requiredCheckboxList");

		$requiredCheckboxLists.each(function (i, el) {
			var $checkboxList = $(this);
			$checkboxList.on("change", "input[type='checkbox']", function (e) {
				updateCheckboxesRequired($(this).parents(".requiredCheckboxList"));
			});

			updateCheckboxesRequired($checkboxList);
		});

		function updateCheckboxesRequired($checkboxList) {
			var $chk = $checkboxList.find("input[type='checkbox']").eq(0),
				cblName = $chk.attr("name"),
				cblNameAttr = "[name='" + cblName + "']",
				$checkboxes = $checkboxList.find("input[type='checkbox']" + cblNameAttr);

			if ($checkboxList.find(cblNameAttr + ":checked").length > 0) {
				$checkboxes.prop("required", false);
			} else {
				$checkboxes.prop("required", true);
			}
		}

	});
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="post" action="post.php">
<div>
	Type of report:
</div>
<div>
	<input type="checkbox" id="chkTypeOfReportError" name="label[]" value="Error" required>
	<label for="chkTypeOfReportError">Error</label>

	<input type="checkbox" id="chkTypeOfReportQuestion" name="label[]" value="Question" required>
	<label for="chkTypeOfReportQuestion">Question</label>

	<input type="checkbox" id="chkTypeOfReportFeatureRequest" name="label[]" value="Feature Request" required>
	<label for="chkTypeOfReportFeatureRequest">Feature Request</label>
</div>

<div>
	Priority
</div>
<div>
	<input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: High" required>
	<label for="chkPriorityHigh">High</label>


	<input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: Medium" required>
	<label for="chkPriorityMedium">Medium</label>


	<input type="checkbox" id="chkTypeOfContributionLow" name="label[]" value="Priority: Low" required>
	<label for="chkPriorityMedium">Low</label>
</div>
<div>
	<input type="submit" />
</div>
</form>

Jqueryを使用したもう1つの簡単なトリックを次に示します。

HTML

<form id="hobbieform">
        <div>
            <input type="checkbox" name="hobbies[]">Coding
            <input type="checkbox" name="hobbies[]">Gaming
            <input type="checkbox" name="hobbies[]">Driving
        </div>
</form>

jQuery

$('#hobbieform').on("submit", function (e) {
    var arr = $(this).serialize().toString();
    if(arr.indexOf("hobbies") < 0){
        e.preventDefault();
        alert("You must select at least one hobbie");
    }
});

これですべてです。チェックボックスが選択されていない場合、チェックボックスグループ（名前を含む）は何もサーバーにポストされないため、これは機能します。

試してください：

self.request.get('sports_played', allow_multiple=True)

または

self.request.POST.getall('sports_played')

すなわち：

チェックボックス配列からデータを読み取るときは、配列に以下が含まれていることを確認してください。

len>0 

この場合：

len(self.request.get('array', allow_multiple=True)) > 0