html只选择一组中的一个复选框 [英] html select only one checkbox in a group

问题描述

那么我怎样才能只允许用户选择一个复选框?

我知道单选按钮是理想的"，但就我而言……它不是.

我有一个字段，用户需要在其中选择两个选项之一，但不能同时选择两者.问题是我需要我的用户也能够取消选择他们的选项，这就是单选按钮失败的地方，因为一旦你选择了组，你就必须选择一个选项.

我将通过 php 验证信息，但如果用户想给出答案，我仍然想限制他们只能给出一个答案.

解决方案

这个片段将:

• 允许像单选按钮那样分组
• 像广播一样行事
• 允许取消选择所有

//选择器将匹配所有类型为 :checkbox 的输入控件//并附加一个点击事件处理程序$("input:checkbox").on('click', function() {//在处理程序中，'this' 指的是点击的框var $box = $(this);如果 ($box.is(":checked")) {//使用 .attr() 方法检索框的名称//因为它被假定和预期是不可变的var group = "input:checkbox[name='" + $box.attr("name") + "']";//另一方面，组/框的选中状态将发生变化//并且使用 .prop() 方法检索当前值$(group).prop("checked", false);$box.prop("checked", true);} 别的 {$box.prop("checked", false);}});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div><h3>水果</h3><标签><input type="checkbox" class="radio" value="1" name="fooby[1][]"/>Kiwi</label><标签><input type="checkbox" class="radio" value="1" name="fooby[1][]"/>菠萝蜜</label><标签><input type="checkbox" class="radio" value="1" name="fooby[1][]"/>芒果</label>

<div><h3>动物</h3><标签><input type="checkbox" class="radio" value="1" name="fooby[2][]"/>Tiger</label><标签><input type="checkbox" class="radio" value="1" name="fooby[2][]"/>Sloth</label><标签><input type="checkbox" class="radio" value="1" name="fooby[2][]"/>Cheetah</label>

So how can I only allow a user to select only one checkbox?

I know radio buttons are "ideal", but for my purpose...it's not.

I have a field where users need to select either or of the two options, but not both. The problem is that I need my users to also be able to unselect their option, and this is where radio buttons fail because once you select the group, you have to choose an option.

I will be validating the info via php, but I'd still like to restrict the users to one answer if they want to give it.

解决方案

This snippet will:

• Allow grouping like Radio buttons
• Act like Radio
• Allow unselecting all

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

这篇关于html只选择一组中的一个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！