jQuery - 像单选按钮一样的复选框

我有组复选框，并且我喜欢该组是否具有类似具有相同名称属性的单选按钮的行为。

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

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

我怎样才能做到这一点？

Solution

为什么我需要这个？ 因为我们需要一致性的WebUI。 请注意，这不是关于我们的应用程序架构的问题。 :)

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

这里有一个提示：使用单选按钮。 ;)

我不建议这样做，因为它会被认为对可用性不利，并且肯定会违反最小意外原则。用户已经习惯于期望收音机接受 1 个复选框，而复选框则接受多个复选框。不要让你的用户思考。 http://www.sensible.com/

不过，如果您有自己的理由，以下是如何使用 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');
});

这是一个现场样品 http://jsbin.com/uwewi.

EDIT:

正如评论中所指出的，这将允许用户取消选择所有复选框，即使他们最初选择了一个复选框，这与单选按钮不同。如果你想要这个，那么 jQuery 将如下所示：

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