jQuery：使复选框像单选按钮一样？答案

【问题标题】：jQuery: make checkboxes act like radio buttons?jQuery：使复选框像单选按钮一样？
【发布时间】：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 与复选框不同，无法取消选中单选按钮。

标签： jquery checkbox radio-button

【解决方案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>
&nbsp;&nbsp;(OR)&nbsp;&nbsp;
<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>

我也同意这样做是个坏主意，但如果您为每个输入指定不同的名称（并且无法更改它们），则别无选择...

【讨论】：