1. ホーム
  2. html

[解決済み] 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>