时间戳

首页 > 解决方案 > 复选框未设置在 jquery 中选中 onclick

javascript - 复选框未设置在 jquery 中选中 onclick

问题描述

我有一个 3 个 html 复选框 ( <input type="checkbox" id="chkBillTos" class="chk" />)，它们具有相同的类和不同的 Id，我想在它们之间切换（即，如果一个选中其他两个未选中）。但是当我点击一个复选框时，它没有被选中，而其他两个可以被选中或取消选中。

$(".chk").click(function() {
  $('.chk').attr('checked', 'checked');
  //$('.chk').attr('unchecked', 'unchecked');
  var id = $(this.id);
  id.checked = true;
  $(id).attr('checked', 'checked');
  if (!$(this).is(':checked')) {
    alert($(this));
    $(this).is(':checked') = true;
  }
}

标签： javascriptjquery

解决方案

正如@Rory McCrossan 已经说过的那样，单选按钮可能更适合您（不需要 JS）。

<label><input type="radio" name="a"> 1</label>
<label><input type="radio" name="a"> 2</label>
<label><input type="radio" name="a"> 3</label>

如果您仍想使用复选框，您可以这样做：

$('.check').on('change', function () {
  if ($(this).prop('checked')) {
    $('.check').prop('checked', false);
    $(this).prop('checked', true);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input type="checkbox" class="check"> 1</label>
<label><input type="checkbox" class="check"> 2</label>
<label><input type="checkbox" class="check"> 3</label>

$.attr()我没有使用，而是使用$.prop()获取/设置检查状态。

推荐阅读