jQuery：make复选框就像单选按钮一样？

有没有办法让复选框像单选按钮一样？ 我假设这可以用jQuery完成？

如果选中了一个框，则该组中的其他框将取消选中。

Answer 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添加了组分离。

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

Answer 3

也许你想考虑一种不同的方法。 我相信你想把单选按钮的样式看起来像一个复选框。 如果是这样，请参阅： 此谷歌搜索

以下是我从www.thecssninja.com借鉴的简化示例。

简单地说：你隐藏了实际的单选按钮（参见css输入[type = radio]）并为相应的单选按钮设置标签样式以显示自定义复选框（来自输入中背景图像中的css sprite [类型] = radio] + label）当单选按钮处于选中状态时，切换到后台的不同精灵。 在这里运行示例： http ： //jsfiddle.net/jchandra/R5LEe/

          Custom control images and concept from www.thecssninja.com
 
    
      

Answer 4

与@amosrivera基本相同的答案，但删除所有复选框的取消选中作为必要。 改为使用.not（）

  $("input:checkbox").click(function(){ var group = "input:checkbox[name='"+$(this).prop("name")+"']"; $(group).not(this).prop("checked",false); }); 

Answer 5

如果您将类应用于复选框，则可以使用以下代码轻松实现单选按钮function：

 $(".make_radio").click(function(){ $(".make_radio").not(this).attr("checked",false); }); 

Answer 6

我会评论，但没有代表。 使用.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); } ); 

Answer 7

更新了脚本（通过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/

Answer 8

如果选择“$（”input：复选框“）”，将选中所有复选框，以便您可以使用其名称指定不同的单选按钮。

  $("[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); }); 

  
 Blink   (OR)   Shine Text 
 
 Diff Check box1 
 Diff Check box2 
 Diff Check box3 
 

Answer 9

使用复选框的更改事件并为当前选中的复选框分配选中的值：

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

 .checkBoxb{ float:left; clear:both; } 

   CheckBox1  CheckBox2  CheckBox3  CheckBox4 

Answer 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 }); }); 

小提琴

Answer 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; } }); 

   test 0  test 1  test 2  test 3