使用JavaScript和jQuery通过复选框实现<div>淡入淡出效果报错求助

嘿，你的问题根源很明确，咱们先把语法错误和逻辑问题逐个拆解清楚：

触发语法错误的核心原因 #

你写的两个if条件后面都多了个不必要的分号，比如：

if(document.getElementById("jobfixedstart").checked == false;){

这个多余的分号会让浏览器误以为if语句已经结束，后面的{就成了无意义的语法符号，直接触发Uncaught SyntaxError: Unexpected token ;错误。

除此之外还有两个小问题：

1. 第二个if里你写了document.getElementById("checkbox").checked = false;，但你的复选框ID是jobfixedstart，这里ID写错了；
2. 两个if会同时执行判断逻辑，应该改成if-else结构，避免状态冲突。

修正后的完整代码 #

HTML部分（注意闭合div标签） #

<input type="checkbox" class="form-control" value="jobfixedstart" id="jobfixedstart" />
<div id="jobstartdatefade">Text</div>

JavaScript部分（修复语法+逻辑） #

// 初始设置复选框为未选中状态
document.getElementById("jobfixedstart").checked = false;

document.getElementById('jobfixedstart').onclick = function(){
  // 移除条件里的分号，改用if-else结构
  if(document.getElementById("jobfixedstart").checked == false){
    $('#jobstartdatefade').fadeIn(200);
    document.getElementById("jobfixedstart").checked = true;
  } else {
    $('#jobstartdatefade').fadeOut(200);
    document.getElementById("jobfixedstart").checked = false;
  }
};

更简洁的jQuery写法（推荐） #

既然你已经引入了jQuery，完全可以用它简化代码，避免原生JS和jQuery混用的冗余：

// 初始设置复选框未选中，同时可以默认隐藏目标div（如果需要）
$("#jobfixedstart").prop("checked", false);
$("#jobstartdatefade").hide();

// 绑定点击事件
$("#jobfixedstart").on("click", function() {
  // 直接用当前复选框的状态判断
  if ($(this).is(":checked")) {
    $("#jobstartdatefade").fadeOut(200);
  } else {
    $("#jobstartdatefade").fadeIn(200);
  }
});

甚至可以用fadeToggle一步实现切换效果，代码更短更优雅：

$("#jobfixedstart").prop("checked", false);
$("#jobstartdatefade").hide();

$("#jobfixedstart").on("click", function() {
  $("#jobstartdatefade").fadeToggle(200);
});

这样不仅解决了语法错误，逻辑也更清晰，运行起来就不会有问题啦～

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