我的jQuery if/else if语句无法正常工作，请求技术排查

嘿，我仔细看了你的代码，发现两个关键问题导致只有if分支在跑，else完全没机会执行，咱们一步步拆解：

你的原始代码 #

HTML部分 #

<table> 
  <tr> 
    <td><input type="checkbox" value="test" /></td> 
    <td><a class="clickme" href="#">edit</a></td> 
  </tr> 
</table>

JS部分 #

$('.clickme').click(function () { 
  if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false)) { 
    $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true); 
    console.log('Test2'); 
  } else if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true)) { 
    $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false); 
    console.log('Test'); 
  } 
});
$('.clickme').click(function () { 
  if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false)) { 
    $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true); 
    console.log('Test2');
  } else if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true)) { 
    $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false); 
    console.log('Test'); 
  } 
});

引入的jQuery版本 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

问题根源 #

1. prop()方法的用法错误：
   你在if条件里写的prop('checked', false)是设置属性值的写法，它返回的是jQuery对象（永远为truthy值），所以第一个if条件永远为真，else分支根本没机会执行！
   正确获取当前checked状态的写法是不带第二个参数：prop('checked')，这会返回布尔值true或false。

2. 重复绑定click事件：
   你给.clickme绑定了两次完全一样的click事件，这会导致每次点击触发两次逻辑，不仅冗余，还可能让checkbox状态来回切换两次，看起来像没生效。

修复后的代码 #

优化后的JS代码 #

// 只绑定一次点击事件
$('.clickme').click(function (e) {
  // 阻止a标签默认跳转行为（可选，但建议加）
  e.preventDefault();
  // 先获取checkbox的jQuery对象，避免重复DOM查询，提升性能
  const $checkbox = $(this).closest('td').prev().find('input[type=checkbox]');
  // 获取当前checked状态
  const isChecked = $checkbox.prop('checked');
  
  // 直接取反状态，简化逻辑
  $checkbox.prop('checked', !isChecked);
  
  // 打印对应日志
  if (!isChecked) {
    console.log('Test2');
  } else {
    console.log('Test');
  }
});

额外说明 #

• 加了e.preventDefault()是为了阻止a标签默认的跳转行为，避免页面跳转到顶部（因为你的a标签href是#）。
• 把DOM查询的结果存到变量$checkbox里，避免每次都重复查找DOM元素，既提升性能也让代码更简洁。
• 直接用!isChecked来设置新状态，比写if/else再分别设置更简洁高效。

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