html只select一个组中的一个checkbox

那么我怎样才能让用户只select一个checkbox?

我知道单选button是“理想的”,但是为了我的目的…不是。

我有一个用户需要select其中一个或两个选项的字段,但不是两个。 问题是我需要我的用户也能够取消select他们的选项,这是单选button失败的地方,因为一旦你select了组,你必须select一个选项。

我将通过PHP来validation信息,但是我仍然想限制用户只有一个答案,如果他们想要的话。

这段代码将会:

  • 允许像单选button一样分组
  • 像电台一样行事
  • 允许取消所有select
// 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> 

你想绑定一个change()处理程序,这样当checkbox的状态发生变化时,事件就会触发。 然后,除了触发处理程序之外,只需取消选中所有checkbox:

 $('input[type="checkbox"]').on('change', function() { $('input[type="checkbox"]').not(this).prop('checked', false); }); 

这是一个小提琴


至于分组,如果你的checkbox“群”都是兄弟姐妹:

 <div> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> </div> <div> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> </div> <div> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> </div> 

你可以这样做:

 $('input[type="checkbox"]').on('change', function() { $(this).siblings('input[type="checkbox"]').prop('checked', false); }); 

这是另一个小提琴


如果您的checkbox按其他属性分组,如name

 <input type="checkbox" name="group1[]" /> <input type="checkbox" name="group1[]" /> <input type="checkbox" name="group1[]" /> <input type="checkbox" name="group2[]" /> <input type="checkbox" name="group2[]" /> <input type="checkbox" name="group2[]" /> <input type="checkbox" name="group3[]" /> <input type="checkbox" name="group3[]" /> <input type="checkbox" name="group3[]" /> 

你可以这样做:

 $('input[type="checkbox"]').on('change', function() { $('input[name="' + this.name + '"]').not(this).prop('checked', false); }); 

这是另一个小提琴

单选button是理想的。 你只需要第三个“既不是”选项默认select。

 $("#myform input:checkbox").change(function() { $("#myform input:checkbox").attr("checked", false); $(this).attr("checked", true); }); 

这应该适用于表单中任意数量的checkbox。 如果您有其他人不属于该组,则将select器设置为适用的input。

例子与AngularJs

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> angular.module('app', []).controller('appc', ['$scope', function($scope) { $scope.selected = 'other'; } ]); </script> </head> <body ng-app="app" ng-controller="appc"> <label>SELECTED: {{selected}}</label> <div> <input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male <br> <input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female <br> <input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other </div> </body> </html> 

build立在billyonecan的答案,你可以使用下面的代码,如果你需要多个checkbox(假设他们有不同的名称)的片段。

  $('input.one').on('change', function() { var name = $(this).attr('name'); $('input[name='+name+'].one').not(this).prop('checked', false); }); 

可能这个代码可以帮助你。

 $(document).ready(function(){ $('.slectOne').on('change', function() { $('.slectOne').not(this).prop('checked', false); $('#result').html($(this).data( "id" )); if($(this).is(":checked")) $('#result').html($(this).data( "id" )); else $('#result').html('Empty...!'); }); }); 
 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <input type="checkbox" class="slectOne" data-id="1 selected"/> <input type="checkbox" class="slectOne" data-id="2 selected"/> <input type="checkbox" class="slectOne" data-id="3 selected"/> <input type="checkbox" class="slectOne" data-id="4 selected"/> <input type="checkbox" class="slectOne" data-id="5 selected"/> <input type="checkbox" class="slectOne" data-id="6 selected"/> <input type="checkbox" class="slectOne" data-id="7 selected"/> <input type="checkbox" class="slectOne" data-id="8 selected"/> <input type="checkbox" class="slectOne" data-id="9 selected"/> <input type="checkbox" class="slectOne" data-id="10 selected"/> <span id="result"></span> </body> </html> 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> angular.module('app', []).controller('appc', ['$scope', function($scope) { $scope.selected = 'male'; } ]); </script> </head> <body ng-app="app" ng-controller="appc"> <label>SELECTED: {{selected}}</label> <div> <input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male <br> <input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female <br> <input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other </div> </body> </html> 

以下是我喜欢的一个简单的HTML和JavaScript解决scheme:

// js函数一次仅允许检查一个工作日checkbox:

 function checkOnlyOne(b){ var x = document.getElementsByClassName('daychecks'); var i; for (i = 0; i < x.length; i++) { if(x[i].value != b) x[i].checked = false; } } Day of the week: <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Monday" />Mon&nbsp;&nbsp;&nbsp; <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Tuesday" />Tue&nbsp;&nbsp;&nbsp; <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Wednesday" />Wed&nbsp;&nbsp;&nbsp; <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Thursday" />Thu&nbsp;&nbsp;&nbsp; <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Friday" />Fri&nbsp;&nbsp;&nbsp; <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Saturday" />Sat&nbsp;&nbsp;&nbsp; <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Sunday" />Sun&nbsp;&nbsp;&nbsp;<br /><br /> 

如果有人需要一个没有外部JavaScript库的解决scheme,你可以使用这个例子。 一组允许0..1个值的checkbox。 您可以点击checkbox组件或关联的标签文本。

  <input id="mygroup1" name="mygroup" type="checkbox" value="1" onclick="toggleRadioCheckbox(this)" /> <label for="mygroup1">Yes</label> <input id="mygroup0" name="mygroup" type="checkbox" value="0" onclick="toggleRadioCheckbox(this)" /> <label for="mygroup0">No</label> - - - - - - - - function toggleRadioCheckbox(sender) { // RadioCheckbox: 0..1 enabled in a group if (!sender.checked) return; var fields = document.getElementsByName(sender.name); for(var idx=0; idx<fields.length; idx++) { var field = fields[idx]; if (field.checked && field!=sender) field.checked=false; } }