JavaScript（jQuery）中if-else逻辑失效问题求助

你遇到的问题很典型——明明写了else分支允许提交，但选Yoda之外的选项时表单还是提交不了，核心问题出在jQuery的选择器使用错误上，我来给你拆解一下：

错误根源 #

你的判断条件 $("input#checkbox_yoda :selected") 有两个关键问题：

1. :selected 选择器用错场景：这个选择器是专门给下拉菜单的 <option> 元素设计的，复选框/单选框的选中状态应该用 :checked 选择器。
2. 选择器空格导致逻辑失效：input#checkbox_yoda :selected 会去查找该input元素内部的选中子元素，但你的复选框本身就是独立表单控件，内部没有子元素，所以这个选择器永远返回空jQuery对象。而JS中空jQuery对象会被判定为true，导致你的if分支永远执行，一直返回false阻止提交！

修复后的代码 #

我调整了代码，同时优化了写法的严谨性：

$(document).ready(function() {
  $("form").submit(function(e) {
    // 正确判断Yoda复选框是否被选中
    if ($("#checkbox_yoda").is(":checked")) {
      alert('you pick yoda');
      e.preventDefault(); // 仅阻止表单提交，不干扰其他事件冒泡
    }
    // 不需要else分支：未选中Yoda时，表单会默认执行提交逻辑
  });
});

关键修改说明 #

• 替换错误选择器：改成 $("#checkbox_yoda").is(":checked")，.is(":checked") 会返回布尔值，精准判断复选框的选中状态，不会出现空对象被误判为true的问题。
• 绑定表单submit事件：相比绑定按钮click事件，这样不管是点击提交按钮还是按回车键提交，逻辑都会生效，覆盖场景更全面。
• 用e.preventDefault()替代return false：return false会同时阻止默认行为和事件冒泡，而我们只需要阻止表单提交，preventDefault()更精准，也符合现代前端的写法规范。

另一种等价判断方式 #

你也可以直接通过选择器的长度来判断，效果完全一致：

if ($("#checkbox_yoda:checked").length) {
  alert('you pick yoda');
  e.preventDefault();
}

这样修改后，当你选中Trooper或Vader时，表单就能正常提交了~

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