jQuery实现复选框勾选时向Div添加当日日期的问题求助

开发者阿泽

2026-5-28

我来帮你梳理下问题所在，你的代码里有几个小问题导致功能在页面上不生效，咱们一步步解决：

1. 核心语法错误

你这段代码里的条件判断少了if关键字，这直接导致脚本无法正确解析执行：

// 错误写法
$('input[name=cb-switch]').is(':checked') { ... }

// 正确写法应该是
if ($('input[name=cb-switch]').is(':checked')) { ... }

2. 多余的`appendTo(document)`

$('div#startDate').html(currentDate)已经是直接给这个div设置内容了，再加上.appendTo(document)完全没必要，反而可能干扰DOM操作。

3. 函数触发时机问题

你的GetTodayDate()函数需要被正确调用，而且得确保DOM加载完成后再操作元素——你之前尝试加$(document).ready()出错，大概率是写法有误。

修正后的完整代码

我把代码重构了下，解决了上述问题，还加上了复选框状态变化的监听：

$(document).ready(function() {
  // 封装日期获取逻辑
  function getTodayDate() {
    const today = new Date();
    const day = today.getDate();
    const month = today.getMonth() + 1; // 月份从0开始，要+1
    const year = today.getFullYear();
    return `${day}/${month}/${year}`;
  }

  // 处理复选框状态的逻辑
  function updateDateDisplay() {
    const checkbox = $('input[name=cb-switch]');
    const dateContainer = $('div#startDate');
    
    if (checkbox.is(':checked')) {
      dateContainer.html(getTodayDate());
    } else {
      // 可选：取消勾选时清空日期
      dateContainer.empty();
    }
  }

  // 页面加载完成后，先检查一次复选框状态
  updateDateDisplay();

  // 绑定复选框的change事件，状态变化时自动更新
  $('input[name=cb-switch]').on('change', updateDateDisplay);
});