问卷单选按钮位置随机化失效：jQuery代码问题排查

嘿，我帮你找出了几个导致单选按钮随机排序失效的关键问题，咱们一个个拆解：

主要问题汇总 #

• 缺少jQuery库引用：你代码里用了$（jQuery的核心函数），但浏览器根本不知道$是什么——因为没加载jQuery库！这是最基础的错误。
• 脚本执行时机过早：你的脚本放在<head>标签里，这时候页面的DOM元素还没渲染出来，$(".cc-selector")找不到目标容器，自然没法修改它的内容。
• 变量名语法错误：var cc-selector = ...里的变量名用了减号，这在JavaScript里是非法的（减号是运算符），得换成合法的命名，比如ccSelector。
• 选择器类型错误：你用了$("#cc-selector")（ID选择器），但HTML里的容器是class="cc-selector"，应该用类选择器$(".cc-selector")。
• 排序逻辑不够稳定：Math.round(Math.random())-0.5的随机范围太窄，换成Math.random() - 0.5能得到更均匀的随机排序结果。

修正后的完整代码 #

<!DOCTYPE html> 
<html> 
<head> 
    <title>survey</title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="test7.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body> 
    <div id="wrapper"> 
        <header> 
            <img src="Win.png" alt="Logo" class="Logo"> 
            <img src="Screw.jpg" alt="screwLogo" class="screwLogo"> 
            <h1 class="Survey_Title">Heath and Wellbeing</h1><br> 
            <h2 class="Survey_Question">Did you find the most recent Wellbeing campaign useful?</h2><br> 
            <form action="" method="post"> 
                <div class="cc-selector"> 
                    <label> 
                        <input id="happy" type="radio" name="radAnswer" value="happy" onclick="window.location='test6.html';" /> 
                        <label class="drinkcard-cc happy" for="happy"></label> 
                    </label> 
                    <label> 
                        <input id="sad" type="radio" name="radAnswer" value="sad" onclick="window.location='test6.html';" /> 
                        <label class="drinkcard-cc sad"for="sad"></label> 
                    </label> 
                </div> 
            </form> 
        </header> 
    </div>

    <!-- 把脚本放到底部，确保DOM加载完成后执行 -->
    <script>
        // 使用合法的变量名
        var ccSelector = $(".cc-selector");
        // 修正选择器并优化排序逻辑
        ccSelector.html(
            ccSelector.find("label").sort(function(){
                return Math.random() - 0.5;
            })
        );
    </script>
</body> 
</html>

额外提示 #

• 如果不想把脚本放到底部，也可以用$(document).ready()包裹代码，确保DOM加载完成后执行：

  $(document).ready(function() {
      var ccSelector = $(".cc-selector");
      ccSelector.html(
          ccSelector.find("label").sort(function(){
              return Math.random() - 0.5;
          })
      );
  });
  

• 另外，你的表单里的单选按钮用onclick跳转，其实可以考虑用表单提交事件来处理，这样更符合表单的逻辑，但当前的写法也能正常工作。

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