jQuery：使复选框像单选按钮一样？
Posted
技术标签:
【中文标题】jQuery：使复选框像单选按钮一样？【英文标题】：jQuery: make checkboxes act like radio buttons? 【发布时间】：2011-06-09 12:51:47 【问题描述】：有没有办法让复选框像单选按钮一样？我认为这可以用 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][]" />
如果选中一个框，则组中的其他框将取消选中。
【问题讨论】：
为什么不使用实际的单选按钮？使用复选框作为单选按钮会让您的用户感到困惑。 我可以把我的狗打扮成猫一样，但养一只猫不是更聪明吗？ @Phrogz：我不够认真吗？ :// 感谢公平的警告！我知道这是一个糟糕的主意。我没有借口。 @BoltClock 与复选框不同，无法取消选中单选按钮。 【参考方案1】：$("input:checkbox").click(function()
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).attr("checked",false);
$(this).attr("checked",true);
);
这样就可以了，虽然我同意这可能是个坏主意。
在线示例：http://jsfiddle.net/m5EuS/1/
UPDATE添加了组分离。
【讨论】：
把它改成“input.radio:checkbox”，你就搞定了。 这几乎可行，但在示例中唯一不起作用的部分是复选框组的名称不同。在您的代码中，页面上的所有复选框都会受到影响，而不是特定集合中的复选框。 不，因为这仍然行不通，如果你注意到这个名字，他有 2 个组，你已经把它当作一个大组了 我必须将.not(this) 添加到组中才能使其在我的情况下工作 - 尽管我在名称值中进行了硬编码以针对特定的复选框组：http://jsfiddle.net/C3nw4/1/
不适用于较新的 jQuery，请使用 prop 代替 attr【参考方案2】：
为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);
);
这是一个例子： http://jsfiddle.net/m5EuS/585/
【讨论】：
【参考方案3】：如果将类应用于复选框，则可以使用以下代码轻松实现单选按钮功能：
$(".make_radio").click(function()
$(".make_radio").not(this).attr("checked",false);
);
【讨论】：
这是not 方法的优雅用法。【参考方案4】：
也许您想考虑一种不同的方法。我相信您希望将单选按钮设置为看起来像复选框。如果是这样，请参阅：this google search
下面是我从 www.thecssninja.com 借来的一个简化示例。
简单地说： 您隐藏实际的单选按钮（请参阅 css input[type=radio]）并设置相应单选按钮的标签以显示自定义复选框（来自 input[type=radio] + label 中背景图像中的 css sprite ) 并在单选按钮处于选中状态时切换到后台的不同精灵。在此处运行示例：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>
【讨论】：
【参考方案5】：与@amosrivera 的答案基本相同，但根据需要取消选中所有复选框。而是使用 .not()
$("input:checkbox").click(function()
var group = "input:checkbox[name='"+$(this).prop("name")+"']";
$(group).not(this).prop("checked",false);
);
【讨论】：
这不能用作单选按钮，您需要在每次点击时设置检查 感谢这帮助我使它也无法检查。不错的方法与 not 功能。【参考方案6】：更新了脚本（通过 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
);
);
http://jsfiddle.net/kya0639w/
【讨论】：
【参考方案7】：我会发表评论，但没有代表。使用 .change 而不是 .click 来实现可访问性，因此它可以与键盘一起使用，如下所示：
jQuery(".radio-check-box").change( function()
var checked = jQuery(this).prop("checked");
jQuery(".radio-check-box").attr("checked", false);
jQuery(this).prop("checked", checked);
);
【讨论】：
【参考方案8】：如果您选择 "$("input:checkbox")" 将选中所有复选框，以便您可以使用其名称指定不同的单选按钮。
$("[name='sname1']").click(function()
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).prop("checked",false);
下面的例子会解释
$("[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); );
【讨论】：
【参考方案9】：使用复选框的更改事件并为当前选中的复选框分配选中值：
$("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>【讨论】：
【参考方案10】：我更新了 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
);
);
Fiddle
【讨论】：
【参考方案11】：给出的解决方案不关心初始状态，这与单选按钮的行为不同。此外，它还会在单击已检查的输入时触发更改事件。
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>我也同意这样做是个坏主意，但如果您为每个输入指定不同的名称（并且无法更改它们），则别无选择...
【讨论】：
以上是关于jQuery：使复选框像单选按钮一样？的主要内容，如果未能解决你的问题，请参考以下文章