では、どうすればユーザーがチェックボックスを 1 つだけ選択できるようにできるでしょうか?
ラジオ ボタンが「理想的」であることはわかっていますが、私の目的には適していません。
ユーザーが 2 つのオプションのうち、どちらか一方を選択する必要があり、両方を選択する必要がないフィールドがあります。問題は、ユーザーがオプションの選択を解除できるようにする必要があることです。グループを選択すると、オプションを選択する必要があるため、ラジオ ボタンは機能しません。
私は PHP 経由で情報を検証しますが、ユーザーが回答を希望する場合は 1 つの回答に制限したいと思います。
ベストアンサー1
このスニペットは次のようになります。
- ラジオボタンのようなグループ化を許可する
- ラジオのように行動する
- すべて選択解除を許可する
// the selector will match all input controls of type :checkbox
// and attach a click event handler
$("input:checkbox").on('click', function() {
// in the handler, 'this' refers to the box clicked on
var $box = $(this);
if ($box.is(":checked")) {
// the name of the box is retrieved using the .attr() method
// as it is assumed and expected to be immutable
var group = "input:checkbox[name='" + $box.attr("name") + "']";
// the checked state of the group/box on the other hand will change
// and the current value is retrieved using .prop() method
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<h3>Fruits</h3>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Kiwi</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Jackfruit</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Mango</label>
</div>
<div>
<h3>Animals</h3>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />Tiger</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />Sloth</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />Cheetah</label>
</div>