点击模态框同意按钮时复选框未勾选问题及功能实现需求

嘿，这个需求很常见，咱们轻松就能搞定！核心思路就是给模态框里的「同意」按钮绑定一个点击事件，当用户点击按钮时，自动把termsChk这个复选框设为勾选状态。下面给你两种适配不同技术栈的实现方案：

原生JavaScript方案（无依赖） #

首先，先确认你的模态框同意按钮有个可定位的标识（比如给按钮加个id="agreeBtn"），然后添加这段代码：

// 等页面DOM加载完成再执行，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取同意按钮和目标复选框元素
  const agreeButton = document.getElementById('agreeBtn');
  const termsCheckbox = document.getElementById('termsChk');

  // 给同意按钮绑定点击事件
  agreeButton.addEventListener('click', function() {
    // 勾选复选框
    termsCheckbox.checked = true;
    // 顺带关闭模态框（如果你用的是Bootstrap模态框）
    const termsModal = new bootstrap.Modal(document.getElementById('termsModal'));
    termsModal.hide();
  });
});

jQuery方案（如果项目用了jQuery） #

要是你的项目已经引入了jQuery，代码会更简洁：

$(document).ready(function() {
  $('#agreeBtn').click(function() {
    // 用prop方法设置复选框的勾选状态
    $('#termsChk').prop('checked', true);
    // 关闭模态框
    $('#termsModal').modal('hide');
  });
});

小提示： #

• 如果你的同意按钮没有id，也可以用类选择器定位，比如按钮有个类btn-confirm-terms，那选择器就改成document.querySelector('.btn-confirm-terms')（原生JS）或者$('.btn-confirm-terms')（jQuery）。
• 一定要确保代码在DOM加载完成后执行，不然会出现找不到元素的情况哦！

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