如何在JavaScript中根据表单值条件返回不同自定义字符串变体？

嘿，针对你这个表单分值判断的需求，我来给你梳理下实现思路和具体代码方案，保证好用！

需求回顾 #

咱们先明确核心要求：

• 3个单选问题，每个选项对应一个数值value
• 计算所有选中选项的value总和
• 当总和>25时，返回自定义字符串，同时要把value≥10的问题列出来

实现思路拆解 #

1. 获取选中值：通过表单元素的name或ID，拿到每个单选问题的选中选项对应的value，记得转成数字类型避免字符串拼接错误
2. 计算总分：把三个问题的数值相加得到总和
3. 筛选高值问题：遍历每个问题的分值，收集所有≥10的问题信息（比如问题编号+对应分值）
4. 判断并生成结果：如果总分>25，就把高值问题拼接到自定义字符串里返回；否则返回其他提示内容

原生JavaScript代码示例 #

假设你的表单里三个问题的单选框name分别为q1、q2、q3，可以用这段代码实现：

function getFormResult() {
    // 获取每个问题的选中分值（转成数字）
    const q1Score = parseInt(document.querySelector('input[name="q1"]:checked').value);
    const q2Score = parseInt(document.querySelector('input[name="q2"]:checked').value);
    const q3Score = parseInt(document.querySelector('input[name="q3"]:checked').value);
    
    // 计算总分
    const totalScore = q1Score + q2Score + q3Score;
    
    // 收集分值≥10的问题
    const highScoreQuestions = [];
    if (q1Score >= 10) highScoreQuestions.push(`问题1（分值：${q1Score}）`);
    if (q2Score >= 10) highScoreQuestions.push(`问题2（分值：${q2Score}）`);
    if (q3Score >= 10) highScoreQuestions.push(`问题3（分值：${q3Score}）`);
    
    // 生成结果字符串
    if (totalScore > 25) {
        // 这里可以根据你的需求自定义字符串内容
        return `您的总分已超过25分，其中分值≥10的问题有：${highScoreQuestions.join('、')}。`;
    } else {
        return "您的总分未超过25分。";
    }
}

// 调用示例：比如表单提交时触发
document.querySelector('form').addEventListener('submit', (e) => {
    e.preventDefault();
    const result = getFormResult();
    console.log(result);
    // 可以把结果展示在页面上，比如document.getElementById('result').textContent = result;
});

扩展优化：支持动态问题数量 #

如果以后问题数量可能增加，用数组循环处理会更灵活，不用逐个写判断：

function getFormResult() {
    // 用数组存储所有问题的name，方便扩展
    const questionNames = ['q1', 'q2', 'q3'];
    let totalScore = 0;
    const highScoreQuestions = [];
    
    questionNames.forEach((name, index) => {
        const score = parseInt(document.querySelector(`input[name="${name}"]:checked`).value);
        totalScore += score;
        if (score >= 10) {
            highScoreQuestions.push(`问题${index + 1}（分值：${score}）`);
        }
    });
    
    if (totalScore > 25) {
        return `您的总分已超过25分，其中分值≥10的问题有：${highScoreQuestions.join('、')}。`;
    } else {
        return "您的总分未超过25分。";
    }
}

Vue框架下的实现示例（可选） #

如果用Vue开发，借助响应式数据和计算属性会更简洁：

<template>
  <form @submit.prevent="handleSubmit">
    <!-- 问题1 -->
    <div class="question">
      <label>问题1：</label>
      <input type="radio" name="q1" v-model="scores.q1" value="5">选项1（5分）
      <input type="radio" name="q1" v-model="scores.q1" value="10">选项2（10分）
      <input type="radio" name="q1" v-model="scores.q1" value="15">选项3（15分）
      <input type="radio" name="q1" v-model="scores.q1" value="20">选项4（20分）
    </div>
    <!-- 问题2、3结构类似，这里省略 -->
    <button type="submit">提交表单</button>
    <div class="result" v-if="resultMessage">{{ resultMessage }}</div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      scores: {
        q1: '',
        q2: '',
        q3: ''
      }
    };
  },
  computed: {
    totalScore() {
      return Object.values(this.scores).reduce((sum, val) => sum + parseInt(val), 0);
    },
    highScoreQuestions() {
      return Object.entries(this.scores).map(([key, val], index) => {
        const score = parseInt(val);
        return score >= 10 ? `问题${index + 1}（分值：${score}）` : null;
      }).filter(item => item !== null);
    },
    resultMessage() {
      if (this.totalScore > 25) {
        return `您的总分已超过25分，其中分值≥10的问题有：${this.highScoreQuestions.join('、')}。`;
      } else if (this.totalScore > 0) {
        return "您的总分未超过25分。";
      }
      return '';
    }
  },
  methods: {
    handleSubmit() {
      // 这里可以添加表单提交到后端的逻辑
      console.log('提交结果：', this.resultMessage);
    }
  }
};
</script>

你可以根据自己的技术栈和业务场景，调整自定义字符串的内容，比如换成更贴合业务的表述，比如“您的评估已达标，高权重问题包括：xxx”之类的。

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