使用JavaScript根据checkbox勾选状态控制textarea显隐的问题求助

核心问题 #

• 控制textarea显隐的逻辑仅在点击Others选项时才会执行，点击其他普通理由选项时，不会触发隐藏textarea的相关代码，这是最主要的原因
• 事件绑定的选择器逻辑冗余，而且你使用的是原生互斥的radio单选框，不需要手动编写切换checked状态、修改value值的代码，多余逻辑反而容易引发异常

修复方案 #

直接监听所有理由单选框的change事件，只要选项切换就判断当前选中项是否为Others，再控制textarea显隐即可，修复后的代码如下：

$(document).ready(function(){
  // 给所有理由单选框绑定change事件
  $("#cancel-reasons input[name='reason-check']").on('change', function() {
    // 选中的是Others选项就显示输入框，否则隐藏
    if ($(this).hasClass('other-reason-checkbox') && $(this).is(':checked')) {
      $("#other-reason-textarea").removeClass("hidden");
    } else {
      $("#other-reason-textarea").addClass("hidden");
    }
  });
});

这个方案省去了冗余的遍历、手动控制单选状态的逻辑，直接利用radio本身的互斥特性，性能和可维护性都更好。

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