复选框 prop() 未按预期工作答案

【问题标题】：Checkbox prop() not working as expected复选框 prop() 未按预期工作
【发布时间】：2016-12-01 08:28:22
【问题描述】：

我正在尝试使用 jQuery 1.12 选中/取消选中复选框。这是我的代码：

$(document).ready(function() {
  $('#btn-agree').click(function() {
    $('#checkbox-3').prop('checked', true);
  });
  $('#btn-notagree').click(function() {
    $('#checkbox-3').prop('checked', false);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<input type="checkbox" name="agreement" id="checkbox-3" />
<button id="btn-agree">I Agree</button>
<button id="btn-notagree">Cancel</button>

当我单击btn-agree 时，该函数不会返回任何错误，但未选中复选框。 console.log($('#checkbox-3').prop('checked');显示true

谁能指出我的代码有什么问题？

编辑我相信问题出在我项目的其他地方。请随时删除此问题。

【问题讨论】：

您是绑定事件，只有btn-agree 使用$('#btn-notagree') 绑定第二次点击处理程序。
Setting "checked" for a checkbox with jQuery?的可能重复
@Satpal 哦，对了。对不起，我写错了代码。第二个应该是#btn-notagree
@jkris 是的，我以前看过那个帖子。这就是为什么我很困惑为什么这段代码不起作用
我已将您的代码放入 sn-p。如您所见，它工作得非常好。我认为这不起作用的唯一原因是您没有将其包装在 document.ready 处理程序中。

标签： javascript jquery checkbox

【解决方案1】：

你必须做这样的事情，那就是检查复选框是否被选中，如果是，则取消选中它，否则检查它

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="agreement" id="checkbox-3"/>
<button id="btn-agree">I Agree</button>
<button id="btn-notagree">Cancel</button>

<script>
$(document).ready(function() {
  $('#btn-agree').click(function() {
    if($('#checkbox-3').prop('checked'))
    $('#checkbox-3').prop('checked',false);
  else{
    $('#checkbox-3').prop('checked',true);
    }
  });
});
  </script>

【讨论】：

【解决方案2】：

您也可以使用is(':checked')检查复选框是否选中

$(document).ready(function() {
    $('#btn-agree').click(function() {
        if($("#checkbox-3").is(':checked') )
        {
            $("#checkbox-3").prop('checked',false);
        }            
        else
        {
            $("#checkbox-3").prop('checked',true); 
        }                    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" name="agreement" id="checkbox-3"/>
<button id="btn-agree">I Agree</button>
<button id="btn-notagree">Cancel</button>

【讨论】：

【解决方案3】：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="agreement" id="checkbox-3"/>
<button id="btn-agree">I Agree</button>
<button id="btn-notagree">Cancel</button>

<script>
$(document).ready(function() {
  $('#btn-agree').click(function() {
    $(this).prop('checked',true);
  });
$('#btn-notagree').click(function() {
    $(this).prop('checked',false);
  });
});
  </script>

【讨论】：

为什么两个事件绑定都将prop设置为false？
请立即查看。