求助：toggleAutre脚本无法正常运行，请求帮忙排查故障

我帮你找出了这段脚本无法正常运行的几个关键问题，咱们一步步来解决：

1. 核心问题分析 #

你的代码主要存在两个致命问题：

• jQuery加载顺序错误：自定义脚本写在了jQuery引入代码的前面，导致浏览器执行你的函数时，$（jQuery的别名）还未被定义，所有jQuery相关操作都会直接失效。
• 事件未绑定：你定义了toggleAutre函数，但没有把它关联到单选框的状态变化事件上，所以勾选/取消勾选时根本不会触发这个函数。

2. 修复后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function toggleAutre(bloc) {
  if ($('#' + bloc + '_oui').is(':checked')) {
    $('#' + bloc + '_texte').show('slow');
    alert('Oui');
  } else if ($('#' + bloc + '_non').is(':checked')) {
    $('#' + bloc + '_texte').hide('slow');
    alert('Non');
  }
}

// 等待DOM加载完成后再绑定事件，避免找不到元素
$(document).ready(function() {
  // 给两个单选框绑定状态变化事件
  $('#bloc_oui, #bloc_non').on('change', function() {
    toggleAutre('bloc');
  });
  
  // 页面初始化时同步一次状态（可选，避免初始显示异常）
  toggleAutre('bloc');
});
</script>

<div class="col">
  <label>
    <input type="radio" name="bloc" id="bloc_oui" value="oui" checked> Oui
  </label>
  <label>
    <input type="radio" name="bloc" id="bloc_non" value="non"> Non
  </label>
  <div id="bloc_texte" style="display:none;">
    这是需要切换显示/隐藏的内容
  </div>
</div>

3. 关键修复点说明 #

• 调整加载顺序：把jQuery的<script>标签放在自定义脚本的前面，确保执行自定义代码时jQuery已经加载完成。
• 添加事件绑定：通过$(document).ready()确保DOM元素加载完成后，给两个单选框绑定change事件，触发toggleAutre函数。
• 初始化状态同步：页面加载时调用一次toggleAutre，确保初始显示状态和单选框的选中状态一致（比如默认选中Oui时，内容会自动显示）。

额外优化建议 #

因为是同组单选框（name属性相同），可以简化判断逻辑，不需要同时检查两个单选框：

function toggleAutre(bloc) {
  const isOuiChecked = $('#' + bloc + '_oui').is(':checked');
  $('#' + bloc + '_texte')[isOuiChecked ? 'show' : 'hide']('slow');
  alert(isOuiChecked ? 'Oui' : 'Non');
}

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