[解決済み] html はグループ内の1つのチェックボックスのみを選択します。
2022-04-28 15:17:44
質問
では、ユーザーが1つのチェックボックスしか選択できないようにするにはどうすればよいのでしょうか?
ラジオボタンが理想的なのは分かっているのですが、私の目的には...そうではありません。
ユーザーが2つのオプションのどちらかを選択する必要があり、両方を選択することはできないフィールドがあります。問題は、ユーザーが選択肢の選択を解除できる必要があることです。グループを選択すると、選択肢を選択しなければならないため、ラジオボタンはここで失敗します。
phpで情報を検証する予定ですが、それでもユーザーが答えを出したい場合は、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>
関連
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] クリック可能なラベルを持つチェックボックスを作成するには?
-
[解決済み] HTMLのチェックボックスのchecked属性の適切な値は何ですか?
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
-
[解決済み】チェックボックスがチェックされているかどうかをjQueryで確認する。
-
[解決済み】radio入力フィールドで "required "属性を使用する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
document.forms 使用方法
-
[解決済み] Bootstrap 3.3.7で改行する方法
-
[解決済み] ジャンボトロンのセンター出しは?
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] ローカルストレージとCookieの比較
-
[解決済み] クリアフィックスとは何ですか?
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?
-
[解決済み] 親ディバイスの高さを指定せずに、子ディバイスの高さを100%にする方法は?
-
[解決済み] 残りの幅を埋めるためにdivを展開する