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 <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Tuesday" />Tue <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Wednesday" />Wed <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Thursday" />Thu <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Friday" />Fri <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Saturday" />Sat <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Sunday" />Sun <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; } }
