jQuery - 像radiobuttons这样的复选框

Question

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

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

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

我怎么能这样做？

---

解

为什么我需要这个？因为我们需要一致性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);
    });
});

Answer 1

这是一个提示:使用单选按钮.;)

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

但是,如果你有理由,这里是如何用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');
});

这是一个实时样本.

编辑:

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

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

Answer 2

你为什么不使用单选按钮呢？

差异是有原因的.它是以这种方式设计的,从用户的角度来看,单选按钮意味着"选择一个",而复选框意味着"选择多个".

不要通过改变这种经过良好尝试的范例来打破用户的期望.当应用程序开发人员更喜欢"看起来"而不是可用性和约定时,这是一件坏事,所以不要成为其中之一.

用户界面起作用是因为使用的隐喻(复选框,按钮,鼠标指针的形状,颜色等)是以某种方式表现的.用户将遇到您的应用程序问题,甚至可能不知道为什么当您执行此类操作时.

这是一个反模式,与使用复选框状态更改标签属于同一类别:

[ ] enable option        vs.      [ ] option
[x] disable option                [x] option