Html html只选择一组中的一个复选框

Question

提问by user962449

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.

我将通过 php 验证信息，但如果用户想给出答案，我仍然想将用户限制为一个答案。

Answer 1

回答by bPratik

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][]" />Hymanfruit</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>

Answer 2

回答by billyonecan

You'd want to bind a change()handler so that the event will fire when the state of a checkbox changes. Then, just deselect all checkboxes apart from the one which triggered the handler:

您希望绑定一个change()处理程序，以便在复选框的状态更改时触发该事件。然后，只需取消选中触发处理程序的复选框之外的所有复选框：

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

Here's a fiddle

这是一把小提琴

As for grouping, if your checkbox "groups" were all siblings:

至于分组，如果您的复选框“组”都是兄弟姐妹：

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

You could do this:

你可以这样做：

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

Here's another fiddle

这是另一个小提琴

If your checkboxes are grouped by another attribute, such as name:

如果您的复选框按另一个属性分组，例如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[]" />

You could do this:

你可以这样做：

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

Here's another fiddle

这是另一个小提琴

Answer 3

回答by Quentin

Radio buttons are ideal. You just need a third "neither" option that is select by default.

单选按钮是理想的选择。您只需要默认选择的第三个“都不是”选项。

Answer 4

回答by Evertvdw

There are already a few answers to this based on pure JS but none of them are quite as concise as I would like them to be.

已经有一些基于纯 JS 的答案，但没有一个像我希望的那样简洁。

Here is my solution based on using name tags (as with radio buttons) and a few lines of javascript.

这是我基于使用名称标签（如单选按钮）和几行 javascript 的解决方案。

function onlyOne(checkbox) {
    var checkboxes = document.getElementsByName('check')
    checkboxes.forEach((item) => {
        if (item !== checkbox) item.checked = false
    })
}

<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">

Answer 5

回答by Surreal Dreams

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

This should work for any number of checkboxes in the form. If you have others that aren't part of the group, set up the selectors the applicable inputs.

这应该适用于表单中的任意数量的复选框。如果您有其他人不属于该组，请将选择器设置为适用的输入。

Answer 6

回答by Ian of Jafty.com

Here is a simple HTML and JavaScript solution I prefer:

这是我更喜欢的一个简单的 HTML 和 JavaScript 解决方案：

//js function to allow only checking of one weekday checkbox at a time:

//js 函数一次只允许检查一个工作日的复选框：

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

Answer 7

回答by Om Shankar

May this code helps you.

愿此代码对您有所帮助。

$(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>

Working link Click here

工作链接点击这里

Answer 8

回答by tcastrog10

Building up on billyonecan's answer, you can use the following code if you need that snippet for more than one checkbox (assuming they have different names).

建立在billyonecan的回答基础上，如果您需要多个复选框的片段（假设它们具有不同的名称），则可以使用以下代码。

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

Answer 9

回答by SamGoody

While JS is probably the way to go, it couldbe done with HTML and CSS only.

虽然 JS 可能是要走的路，但它只能用HTML 和 CSS 来完成。

Here you have a fake radio button which is really a label for a real hidden radio button. By doing that, you get exactly the effect you need.

这里有一个假单选按钮，它实际上是一个真正隐藏单选按钮的标签。通过这样做，您将获得所需的效果。

<style>
   #uncheck>input { display: none }
   input:checked + label { display: none }
   input:not(:checked) + label + label{ display: none } 
</style>

<div id='uncheck'>
  <input type="radio" name='food' id="box1" /> 
  Pizza 
    <label for='box1'>&#9678;</label> 
    <label for='box0'>&#9673;</label>
  <input type="radio" name='food' id="box2" /> 
  Ice cream 
    <label for='box2'>&#9678;</label> 
    <label for='box0'>&#9673;</label>
  <input type="radio" name='food' id="box0" checked />
</div>

See it here: https://jsfiddle.net/tn70yxL8/2/

在这里看到它：https: //jsfiddle.net/tn70yxL8/2/

Now, that assumes you need non-selectable labels.

现在，假设您需要不可选择的标签。

If you were willing to include the labels, you can technically avoid repeating the "uncheck" label by changing its text in CSS, see here: https://jsfiddle.net/7tdb6quy/2/

如果您愿意包含标签，则可以通过更改 CSS 中的文本在技术上避免重复“取消选中”标签，请参见此处：https: //jsfiddle.net/7tdb6quy/2/

Answer 10

回答by DAS

Example With AngularJs

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>

Html html只选择一组中的一个复选框

提问by user962449

回答by bPratik

回答by billyonecan

Here's a fiddle

这是一把小提琴

Here's another fiddle

这是另一个小提琴

Here's another fiddle

这是另一个小提琴

回答by Quentin

回答by Evertvdw

回答by Surreal Dreams

回答by Ian of Jafty.com

回答by Om Shankar

回答by tcastrog10

回答by SamGoody

回答by DAS

相关推荐

最近更新

标签