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

问题描述

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

我知道单选按钮是理想的，但是为了我的目的...它不是。

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

我将通过php验证信息，但如果他们想要给用户，我仍然希望限制用户回答一个答案。

解决方案

此片段将：

• 允许像单选按钮一样分组


• 像收音机


• 允许取消全选

 匹配所有输入控件的类型：checkbox //并附加一个点击事件处理程序$（input：checkbox）。on（'click'，function（）{//在处理程序中，'this' var $ box = $（this）; if（$ box.is（：checked））{//使用.attr（）方法检索框的名称//因为它是假设的， var group =input：checkbox [name ='+ $ box.attr（name）+']; //另一方面，组/框的选中状态将更改为//，并使用.prop（）方法检索当前值$（group）.prop（checked，false）; $ box.prop（checked，true）; } else {$ box.prop（checked，false）; }}）;  

 < script src = //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"> ;</script><div> < h3>水果< / h3> < label> < input type =checkboxclass =radiovalue =1name =fooby [1] []/> Kiwi< / label> < label> < input type =checkboxclass =radiovalue =1name =fooby [1] []/>波罗蜜< / label> < label> < input type =checkboxclass =radiovalue =1name =fooby [1] []/> Mango< / label>< / div>< div& < h3>动物< / h3> < label> < input type =checkboxclass =radiovalue =1name =fooby [2] []/> Tiger< / label> < label> < input type =checkboxclass =radiovalue =1name =fooby [2] []/> Sloth< / label> < label> < input type =checkboxclass =radiovalue =1name =fooby [2] []/> Cheetah< / label>< / div>  pre> 

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屋！