Question

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

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

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

Answer 1

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

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

但作为用户界面，我发现这令人不安：您应该使用单选按钮。用户不希望复选框像这样取消选中。

Answer 2

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

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

取消选中此div的其他复选框

2 个答案: