Question

我有一些带复选框的HTML（由于生成HTML的库，使用单选按钮不方便 - 添加细节，我需要在库外部自己攻击或者找到一种非传统的方法来制作图书馆为我工作）。

我需要模拟单选按钮功能，特别是 - 当检查多个单个框时，应取消选中所有其他框。

我试图取消选中所有框，然后检查我点击的那个框。我的jQuery / JS失败了。你能帮忙吗？

$(function() {
  //check first box
  $("input.duty:first").attr("checked", "true");

  //clicking unchecked box should check that box
  //unchecks all others
  $(".duty").on('click', function(event) {
    $("input.duty").attr("checked", "false");
    $(this).prop("checked", true);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="casePointsFieldset">
  <fieldset class="casePointFieldset">
    <div>
      <label><span>Duty:</span>
                        <input type="checkbox" name="casePoints[0][isDutyPoint]" class="duty" value="0"></label>
    </div>
  </fieldset>
  <fieldset class="casePointFieldset">

    <div>
      <label><span>Duty:</span>
                        <input type="checkbox" name="casePoints[1][isDutyPoint]" class="duty" value="0"></label>
    </div>
  </fieldset>
  <fieldset class="casePointFieldset">
    <div>
      <label><span>Duty:</span>
                        <input type="checkbox" name="casePoints[2][isDutyPoint]" class="duty" value="0"></label>
    </div>
  </fieldset>
</div>

Answer 1

实现此目的的最简单方法是在点击其中任何一个复选框时调用prop('checked', false)，如下所示：

$(".duty").first().prop('checked', true).end().on('click', function(event) {
  $('.duty').not(this).prop('checked', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="casePointsFieldset">
  <fieldset class="casePointFieldset">
    <div>
      <label>
        <span>Duty:</span>
        <input type="checkbox" name="casePoints[0][isDutyPoint]" class="duty" value="0">
      </label>
    </div>
  </fieldset>
  <fieldset class="casePointFieldset">
    <div>
      <label>
        <span>Duty:</span>
        <input type="checkbox" name="casePoints[1][isDutyPoint]" class="duty" value="0">
      </label>
    </div>
  </fieldset>
  <fieldset class="casePointFieldset">
    <div>
      <label>
        <span>Duty:</span>
        <input type="checkbox" name="casePoints[2][isDutyPoint]" class="duty" value="0">
      </label>
    </div>
  </fieldset>
</div>

Answer 2

在所有情况下使用.prop而非混合.prop / .attr。
使用true和false而不是字符串。

更新了代码段：

$(function() {
  //check first box
  $("input.duty:first").prop("checked", true);

  //clicking unchecked box should check that box
  //unchecks all others
  $(".duty").on('click', function(event) {
    $("input.duty").prop("checked", false);
    $(this).prop("checked", true);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="casePointsFieldset">
  <fieldset class="casePointFieldset">
    <div>
      <label><span>Duty:</span>
                        <input type="checkbox" name="casePoints[0][isDutyPoint]" class="duty" value="0"></label>
    </div>
  </fieldset>
  <fieldset class="casePointFieldset">

    <div>
      <label><span>Duty:</span>
                        <input type="checkbox" name="casePoints[1][isDutyPoint]" class="duty" value="0"></label>
    </div>
  </fieldset>
  <fieldset class="casePointFieldset">
    <div>
      <label><span>Duty:</span>
                        <input type="checkbox" name="casePoints[2][isDutyPoint]" class="duty" value="0"></label>
    </div>
  </fieldset>
</div>

Answer 3

如果您只想要一个复选框，则应考虑单选按钮。

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/radio

这应该更好地适应用例。如果您需要任何实施方面的帮助，请告诉我。

我知道你说由于你的使用情况，无线电很难，但是你应该认真考虑扩展你的库，其中包括单选按钮的功能。从HTML的角度来看，它更正确，并形成UI / UX的立场。

Answer 4

尝试将checked-property设置为布尔值false，而不是字符串"false"。

使用该字符串将被解释为true。

$("input.duty").attr("checked", false);

如何确保只有一个复选框可以选中多个复选框？

4 个答案: