jQuery：让复选框表现得像单选按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4697941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: make checkboxes act like radio buttons?
提问by superUntitled
Is there a way to make checkboxes act like radio buttons? I assume this could be done with jQuery?
有没有办法让复选框像单选按钮一样？我认为这可以用 jQuery 来完成？
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
If one box was checked the others in the group would uncheck.
如果选中一个框，组中的其他框将取消选中。
回答by amosrivera
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).attr("checked",false);
$(this).attr("checked",true);
});
This will do it, although i do agree this might be a bad idea.
这会做到，尽管我同意这可能是一个坏主意。
Online example: http://jsfiddle.net/m5EuS/1/
在线示例：http: //jsfiddle.net/m5EuS/1/
UPDATEadded group separation.
UPDATE添加了组分离。
回答by user2301396
Updated for Jquery 1.9- use .prop()instead of .attr()
更新为Jquery 1.9- 使用.prop()而不是.attr()
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).prop("name")+"']";
$(group).prop("checked",false);
$(this).prop("checked",true);
});
Here is an example: http://jsfiddle.net/m5EuS/585/
这是一个例子：http: //jsfiddle.net/m5EuS/585/
回答by Rob
basically the same answer as @amosrivera but remove the unchecking of all the checkbox as its necessary. instead use .not()
与@amosrivera 的答案基本相同，但根据需要取消选中所有复选框。而是使用 .not()
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).prop("name")+"']";
$(group).not(this).prop("checked",false);
});
回答by Jimmy Chandra
Perhaps you want to consider a different approach. I believe you want to style the radio button to look like a checkbox. If so, see: this google search
也许您想考虑采用不同的方法。我相信您想将单选按钮的样式设置为看起来像一个复选框。如果是这样，请参阅：此谷歌搜索
And below is a simplified example that I borrow from www.thecssninja.com.
下面是我从 www.thecssninja.com 借用的一个简化示例。
To put it simply: you hide the actual radio button (see the css input[type=radio]) and you style the label for the corresponding radio button to show the custom checkbox (from the css sprite in the background image in input[type=radio] + label) and switch to a different sprite in the background when the radio button is in checked state. Running example here: http://jsfiddle.net/jchandra/R5LEe/
简而言之：隐藏实际的单选按钮（请参阅 css input[type=radio]）并设置相应单选按钮的标签样式以显示自定义复选框（来自 input[type] 背景图像中的 css sprite） =radio] + label) 并在单选按钮处于选中状态时在后台切换到不同的精灵。在这里运行示例：http: //jsfiddle.net/jchandra/R5LEe/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Custom CSS3 control facade</title>
<style type='text/css'>
label {
padding: 0 0 0 24px;
}
input[type=radio] {
padding:0;
margin:0;
width:16px;
height:16px;
position:absolute;
left:0;
opacity:0
}
input[type=radio] + label {
background:url(http://www.thecssninja.com/demo/css_custom-forms/gr_custom-inputs.png) 0 -1px no-repeat;
width:50px;
height:16px;
}
input[type=radio]:checked + label {
background-position:0 -81px;
}
</style>
</head>
<body>
Custom control images and concept from www.thecssninja.com<br/>
<br/>
<input type="radio" class="radio" value="1" name="fooby[1][]" id="r1" /><label for="r1"></label>
<input type="radio" class="radio" value="2" name="fooby[1][]" id="r2" /><label for="r2"></label>
<input type="radio" class="radio" value="3" name="fooby[1][]" id="r3" /><label for="r3"></label>
<br/>
<input type="radio" class="radio" value="1" name="fooby[2][]" id="r4" /><label for="r4"></label>
<input type="radio" class="radio" value="2" name="fooby[2][]" id="r5" /><label for="r5"></label>
<input type="radio" class="radio" value="3" name="fooby[2][]" id="r6" /><label for="r6"></label>
</body>
</html>
回答by Waqas Ahmed
If you apply class to the checkbox, you can easily achieve the radio button functionality using the following piece of code:
如果将类应用于复选框，则可以使用以下代码轻松实现单选按钮功能：
$(".make_radio").click(function(){
$(".make_radio").not(this).attr("checked",false);
});
回答by Json
Updated the script (via answer from Tomislav) so you also can uncheck ALL checkboxes. Just added a .not(this) and removed the line where the the current checkbox is checked.
更新了脚本（通过 Tomislav 的回答），因此您也可以取消选中所有复选框。刚刚添加了一个 .not(this) 并删除了选中当前复选框的行。
$('form').each(function() { // iterate forms
var $this = $(this);
$this.find('input:checkbox').click(function() {
var group = 'input:checkbox[name="' + $(this).attr('name') + '"]';
$this.find(group).not(this).attr('checked', false).prop('checked', false); // also use prop, for real Property change
});
});
回答by gtournie
The solution given doesn't care about the initial state, which is different from the radio buttons behavior. Plus, it also triggers a change event when clicking on an already checked input.
给出的解决方案不关心初始状态，这与单选按钮的行为不同。此外，它还会在单击已检查的输入时触发更改事件。
var $elements = $('input:checkbox');
// Allow only one input to be selected
$elements.filter(':checked:not(:last)').prop('checked', false);
// Get selected input
var selected = $elements.filter(':checked')[0] || {};
// Handle event
$(document).on('click', 'input:checkbox', function(e) {
if (e.currentTarget === selected) {
e.preventDefault();
} else {
selected.checked = false;
selected = e.currentTarget;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" value="0" /> test 0</label>
<label><input type="checkbox" value="1" checked /> test 1</label>
<label><input type="checkbox" value="2" checked /> test 2</label>
<label><input type="checkbox" value="3" /> test 3</label>I also agree that doing that is a bad idea, but if you have a different name for each input (and can't change them), there is no other choice...
我也同意这样做是一个坏主意，但是如果您为每个输入使用不同的名称（并且无法更改它们），则别无选择...
回答by Merbin Joe
If you select "$("input:checkbox")" will select all the checkbox so you can specify the different radio button by using their name.
如果您选择 "$("input:checkbox")" 将选择所有复选框，以便您可以使用名称指定不同的单选按钮。
$("[name='sname1']").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).prop("checked",false);
Below Example will explain
下面的例子将解释
$("[name='sname1']").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).prop("checked",false);
$(this).prop("checked",true);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="border:1px solid">
<label><input type="checkbox" id="Titleblink_check" name="sname1">Blink</label>
(OR)
<label><input type="checkbox" id="Titleshine_check" name="sname1">Shine Text</label>
<br>
</div>
<label><input type="checkbox" id="id1" >Diff Check box1</label>
<br>
<label><input type="checkbox" id="id2">Diff Check box2</label>
<br>
<label><input type="checkbox" id="id3">Diff Check box3</label>
<br>$(this).prop("checked",true); });
$(this).prop("checked",true); });
回答by Tomislav Kramaric
I updated the Fiddle script, jQuery was missing. Now with prop and attr (use both).
我更新了 Fiddle 脚本，缺少 jQuery。现在使用 prop 和 attr（同时使用两者）。
$('form').each(function() { // iterate forms
var $this = $(this);
$this.find('input:checkbox').click(function() {
var group = 'input:checkbox[name="' + $(this).attr('name') + '"]';
$this.find(group).attr('checked', false).prop('checked', false); // also use prop, for real Property change
$(this).attr('checked', true).prop('checked', true); // also use prop, for real Property change
});
});
回答by Sandip - Full Stack Developer
Use change event of checkbox and assign checked value for current selected checkbox:
使用复选框的更改事件并为当前选定的复选框分配选中的值：
$("input[type=checkbox]").change(function()
{
$("input[type=checkbox]").prop('checked',false);
$(this).prop('checked',true);
});.checkBoxb{
float:left;
clear:both;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkBoxb"><input type="checkbox" /> CheckBox1</label>
<label class="checkBoxb"><input type="checkbox" /> CheckBox2</label>
<label class="checkBoxb"><input type="checkbox" /> CheckBox3</label>
<label class="checkBoxb"><input type="checkbox" /> CheckBox4</label>