logo标签列表

jQuery：如何使复选框像单选按钮一样工作？

jquerycheckboxradio-button
19

有没有办法让复选框像单选按钮一样工作？我猜这可以用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][]" />

如果选中一个复选框，同组内的其他复选框将会被取消选中。

19
为什么不使用真正的单选按钮？把复选框用作单选按钮会让用户非常困惑。 - BoltClock
9
我可以把我的狗装扮成猫，但是只买一只猫不是更明智吗？ - jondavidjohn
@Phrogz：我不够认真吗？ :/ - BoltClock
感谢公正的警告！我知道这是一个可怕的想法。我没有借口。 - superUntitled
2
@BoltClock 无法取消单选按钮，就像复选框一样。 - ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
显示剩余2条评论
11个回答
45
$("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/

更新： 添加了组分隔。

1
把它改成“input.radio:checkbox”，我们就达成协议了。 - Chris Tonkinson
这个代码几乎可以工作，唯一不起作用的部分是示例中复选框组的名称不同。在您的代码中，页面上的所有复选框都会受到影响，而不仅仅是特定集合中的复选框。 - superUntitled
1
不行，因为那样还是不起作用，如果你注意到名字，他有两个组，你把它当作一个大组来使用。 - jondavidjohn
我不得不在组中添加.not(this)才能使它在我的情况下正常工作 - 尽管我硬编码了名称值以针对特定的复选框组：http://jsfiddle.net/C3nw4/1/ - John
1
不适用于较新版本的jQuery，请使用prop而不是attr。 - st35ly
10

如果您将class应用到复选框上，您可以使用以下代码轻松实现单选按钮功能：

$(".make_radio").click(function(){
    $(".make_radio").not(this).attr("checked",false); 
});
这是not方法的优雅用法。 - Jamshad Ahmad
这个解决方案比另一个更优雅。 - B Seven
9

已更新至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/
4

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

3
也许您想考虑另一种方法。我认为您想要将单选按钮样式设置为复选框。如果是这样，请参见：此Google搜索 以下是我从www.thecssninja.com借来的简化示例。
简而言之： 隐藏实际的单选按钮（请参阅css input[type=radio]），并为相应的单选按钮样式设置label以显示自定义复选框（在input[type=radio] + label中的背景图像中的css sprite），并在单选按钮处于选中状态时切换到不同的背景中的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>
3

基本上与 @amosrivera 的答案相同，但是不要取消所有复选框的选择，因为这是必要的。相反，请使用 .not()。

    $("input:checkbox").click(function(){
        var group = "input:checkbox[name='"+$(this).prop("name")+"']";
        $(group).not(this).prop("checked",false);
    });
这样做不起作用，作为单选按钮，你需要在每次点击时设置选中状态。 - st35ly
谢谢，这对我很有帮助，使它也可以取消选中。使用 not 函数的方法很好。 - Bo Pennings
1

使用复选框的change事件，并将当前选中复选框的checked值分配给它：

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

0
如果您选择"$("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>
&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);});

$(this).prop("checked", true);});

0

我更新了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
  });
});

小提琴

0

我想留下评论，但没有足够的声望。为了可访问性并使其与键盘配合使用，请使用 .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);
  } );
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接