0

我有这个脚本来取消选中另一个复选框以获取一对复选框。

如何一次只选择一组？当我有多组复选框时，脚本会将它们全部视为 1 组。

http://jsfiddle.net/infatti/XpTDK/

  <div class="controls check-yes-no">
    <label class="checkbox inline">
      <input type="checkbox" value="option1" name="setupStewardshipReviewApproveReject"> Yes
    </label>
    <label class="checkbox inline">
      <input type="checkbox" value="option2" name="setupStewardshipReviewApproveReject"> No
    </label>
  </div>

  <div class="controls check-yes-no">
    <label class="checkbox inline">
      <input type="checkbox" value="option1" name="setupStewardshipReviewApproveReject"> Yes
    </label>
    <label class="checkbox inline">
      <input type="checkbox" value="option2" name="setupStewardshipReviewApproveReject"> No
    </label>
  </div>

$('.check-yes-no input:checkbox').click(function () {
    $(".check-yes-no input[type='checkbox']").not(this).prop("checked", false); // uncheck the other checkbox when this is checked
});
4

2 回答 2

0

从技术上讲，这不是一个大的变化：

$('.check-yes-no input:checkbox').click(function () {
    $(this).closest('.check-yes-no').find("input[type='checkbox']")
         .not(this).prop("checked", false); 
});

但作为一个 UI，我觉得这很令人不安：你应该改用单选按钮。用户不希望复选框像这样取消选中自己。

于 2013-04-15T19:40:16.457 回答
0

你确定你不是在寻找这样的东西吗？

http://jsfiddle.net/XpTDK/1/

对您的代码稍作修改：

  <div class="controls check-yes-no">
    <label class="checkbox inline">
      <input type="radio" value="option1" name="name1"> Yes
    </label>
    <label class="checkbox inline">
      <input type="radio" value="option2" name="name1"> No
    </label>
  </div>

  <div class="controls check-yes-no">
    <label class="checkbox inline">
      <input type="radio" value="option1" name="name2"> Yes
    </label>
    <label class="checkbox inline">
      <input type="radio" value="option2" name="name2"> No
    </label>
  </div>

以下是表单控件的标准定义：

  • 单选按钮用于两个或多个互斥项目的列表。换句话说，您只能选择几个选项之一，例如多项选择题。

    • 复选框提供二元选择——打开或关闭选项——就像一个真/假问题。
      • 复选框组允许访问者从列表中选择任意数量的项目。
      • 单个复选框用于独立的是/否样式问题。

这些定义相当清楚，但常见的错误继续出现在网站上。考虑从最近的一些冲浪中挑选出来的这些例子：

  • 一个问题后跟两个标记为“是”和“否”的单选按钮。这提供了两个相互排斥的选择，但一个复选框可以更有效地完成相同的事情。

  • 几个复选框的列表，前面有仅选中一项的说明。如果只允许选择一项，请使用单选按钮而不是复选框。

  • 复选框列表，其中包含检查所有适用项的说明。该指令是多余的，因为检查多个选项的能力隐含在使用复选框而不是单选按钮中。显然，Web 构建者认为该说明对于阐明该列表是正常使用复选框的示例是必要的。这表明由于只允许一个选择的复选框被广泛滥用而引起的混乱。

  • 两个独立的问题，相关的和矛盾的，每个问题都有自己的独立复选框。如果选项是互斥的，则相关选项应与响应的单选按钮组合在一起。更好的是，通过一个复选框将问题组合成一个选项。

资料来源：http ://www.techrepublic.com/article/proper-usage-of-check-boxes-and-radio-buttons/5418918

于 2013-04-15T19:42:36.980 回答