jQuery - 像radiobuttons这样的复选框 [英] jQuery - checkboxes like radiobuttons

问题描述

我有组复选框，我喜欢这个组的行为，比如具有相同名称属性的radiobuttons。

I have group checkboxes and I like if this group have behaviour like radiobuttons with same name atribute.

每个复选框都有不同的名称。

Each checkbox has different name.

只能从复选框中选择一个。

Only one can be chosen from checkboxes.

我怎么做？

解决方案

为什么我需要这个？
因为我们需要一致性webUI。
请问，这不是关于我们的应用程序架构的问题。 ：）

Why I need this? Because we need consistency webUI. Please, this is not question about our application architecture. :)

HTML示例

<div class="multiCheckBox">
 <span class="multiGroup">
  <div><input class="multiItem" value="111" name="list" type="checkbox" />111</div>
  <div><input class="multiItem" value="112" name="list" type="checkbox" />112</div>
  <div><input class="multiItem" value="113" name="list" type="checkbox" />113</div>
 </span>
 <span>
  <div><input class="multiItem" value="121" name="list" type="checkbox" />121</div>
  <div><input class="multiItem" value="122" name="list" type="checkbox" />122</div>
  <div><input class="multiItem" value="133" name="list" type="checkbox" />123</div>
 </span>
 <span>
  <div><input class="multiItem" value="131" name="list" type="checkbox" />131</div>
  <div><input class="multiItem" value="132" name="list" type="checkbox" />132</div>
  <div><input class="multiItem" value="133" name="list" type="checkbox" />133</div>
 </span>
</div>

JavaScript

var $groups = $("span.multiGroup", $that);
$groups.each(function() {
    var $group = $(this);
    var $checkboxes = $(":checkbox", $group);
    $checkboxes.click(function() {
        var $activeCheckbox = $(this);
        var state = $activeCheckbox.attr('checked');
        $checkboxes.attr('checked', false);
        $activeCheckbox.attr('checked', state);
    });
});

推荐答案

这是一个提示：使用单选按钮。 ;）

Here's a hint: Use radio buttons. ;)

我不建议这样做，因为它被认为对可用性不利，并且肯定会违反最少惊喜的原则。用户已经习惯于期望无线电接受1个检查，并且复选框接受许多。 不要让用户思考。

I wouldn't recommend doing this because it would be considered bad for usability and would certainly violate the principle of least surprise. Users have been conditioned to expect radios to accept 1 check and checkboxes to accept many. Don't make your users think.

如果你有理由，这里是如何用jQuery做的：

If you have your reasons, though, here's how to go about doing this with jQuery:

<input type='checkbox' name='mygroup1' value='1' class='unique'>
<input type='checkbox' name='mygroup2' value='2' class='unique'>
<input type='checkbox' name='mygroup3' value='3' class='unique'>

和jQuery：

var $unique = $('input.unique');
$unique.click(function() {
    $unique.filter(':checked').not(this).removeAttr('checked');
});

这是实时样本。

编辑：

As在评论中指出，这将允许用户取消选择所有复选框，即使他们最初选择了一个，这与单选按钮不完全相同。如果你想要这个，那么jQuery看起来像这样：

As pointed out in the comments, this would allow the user to deselect all checkboxes even if they chose one initially, which isn't exactly like radio buttons. If you want this, then the jQuery would look like this:

var $unique = $('input.unique');
$unique.click(function() {
    $unique.removeAttr('checked');
    $(this).attr('checked', true);
});

这篇关于jQuery - 像radiobuttons这样的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！