html在组中仅选择一个复选框

小编典典

html在组中仅选择一个复选框

html

那么，如何只允许用户选择一个复选框呢？

我知道单选按钮是“理想的”，但出于我的目的……不是。

我有一个字段，用户需要选择两个选项中的一个或两个，但不能两个都选。问题是我还需要我的用户也可以取消选择他们的选项，这是单选按钮失败的地方，因为一旦选择了组，就必须选择一个选项。

我将通过php验证信息，但是我仍然想将用户限制在一个答案，如果他们想给它的话。

阅读 389

2020-05-10

共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>

2020-05-10