Question

我有两个复选框，如果你勾选一个方框，另一个方框将被取消选中。但由于某种原因，我无法取消选中已经检查过的框

jQuery(document).ready(function(){
  jQuery("input[type='checkbox']").on('click', function () {
    jQuery("input[type='checkbox']").removeClass('selected').attr('checked', false);
    jQuery("input[type='checkbox']").parent().removeClass('selected');
    jQuery(this).parent().addClass('selected')
    jQuery(this).attr('checked', true);
  });

知道为什么会这样吗？

解决方案（感谢Shree）

$('input.example').on('change', function() {
if($(this).is(':checked'))
{
  $('input.example').not(this).prop('checked', false);
  $('input.example').parent().removeClass('selected');
  $(this).parent().addClass('selected');
}
else
{
  $('input.example').parent().removeClass('selected');
}
});

.selected {
  background-color:red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" class="example" />
</div>
<div>
  <input type="checkbox" class="example" />
</div>

Answer 1

在jQuery中，如果要在“input”中使用“checkbox”类型设置“Checked”属性，则需要使用：

$('input#id').prop('checked', true);

或

$('input#id').prop('checked', false);

Answer 2

为此，您可以使用不带选择器的类。

＆＃13;

$('input.example').on('change', function() {
if($(this).is(':checked'))
{
  $('input.example').not(this).prop('checked', false);
  $('input.example').parent().removeClass('selected');
  $(this).parent().addClass('selected');
}
else
{
  $('input.example').parent().removeClass('selected');
}
});

＆＃13;

.selected {
  background-color:red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" class="example" />
</div>
<div>
  <input type="checkbox" class="example" />
</div>

＆＃13;

Answer 3

这解释了＆＃34; attr＆＃34; vs＆＃34; prop＆＃34;在jquery井： https://stackoverflow.com/a/13247188/3514785

1）：使用＆＃34; prop＆＃34;选择/取消选中复选框

2）：attr（＆＃34;已检查＆＃34;，false）不会删除＆＃34;已检查＆＃34;而是给它价值＆＃34;假＆＃34;。如果你真的想使用＆＃34; attr＆＃34;你应该使用removeAttr ...在removeAttr中（＆＃34;选中＆＃34;）。

无法取消选中复选框（jQuery）

3 个答案: