点击模态对话框取消按钮后，如何取消勾选复选框？

我看了你的问题，核心问题其实出在选择器错误上，另外我们可以优化一下交互逻辑，让整个流程更顺畅：

1. 修复核心错误 #

你写的$('chkImm')是在选择标签名为<chkImm>的元素，但你的复选框是用ID定义的，所以必须加上#前缀，正确的选择器应该是$('#chkImm')。

另外对于复选框的checked状态，推荐使用prop()而不是attr()，因为checked是布尔类型的DOM属性，prop()能更准确地操作它的状态。

修改后的Cancel按钮代码应该是：

$('#btnModalCancel').click(function() {
  $('#chkImm').prop('checked', false);
  $('#myModal').modal('hide'); // 别忘了关闭模态框
});

2. 优化交互逻辑（可选但更友好） #

现在的逻辑是用户点击复选框后，复选框先被勾选，再弹出模态框，点击Cancel再取消勾选，可能会出现短暂的勾选闪烁。我们可以调整成先阻止复选框的默认勾选行为，再根据用户的模态框选择来决定是否勾选：

// 复选框点击事件：先阻止默认行为，弹出模态框
$('#chkImm').click(function(e) {
  e.preventDefault();
  $('#myModal').modal('show');
});

// "I understand"按钮：勾选复选框并关闭模态框
$('#btnModalUnderstand').click(function() {
  $('#chkImm').prop('checked', true);
  $('#myModal').modal('hide');
});

// "Cancel"按钮：保持未勾选状态并关闭模态框
$('#btnModalCancel').click(function() {
  $('#chkImm').prop('checked', false);
  $('#myModal').modal('hide');
});

这样用户点击复选框时不会立刻看到状态变化，完全根据模态框的选择来更新复选框状态，体验更流畅。

为什么原来的代码console.log能执行但复选框没变化？ #

因为$('chkImm')找不到对应的元素，所以后续的prop()/attr()操作根本没有作用在你的复选框上，但函数本身还是能正常执行，所以console.log('test')能输出。只要把选择器改成$('#chkImm')，问题就能解决啦。

内容的提问来源于stack exchange，提问作者cicatrix