JS模拟调查问卷之单选按钮

最新推荐文章于 2025-05-25 22:38:18 发布

weixin_34393428

最新推荐文章于 2025-05-25 22:38:18 发布

阅读量567

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript ui ViewUI

原文链接：https://juejin.im/post/5ba339f45188255c43229458

本文介绍了一个基于LayUI的问卷评分系统实现方案，利用JavaScript进行分数的加减运算及总分计算。通过单选按钮实现了固定等级及分数的评分功能，并提供了一种从后台获取数据并初始化的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目中有一个类似于调问卷评分的需求，使用JS实现分数的加减以及总分。

项目中的UI库使用的是LayUI,以下为具体代码。

    var sum = 0;
    var myMap = {};// Json对象用来存储按钮的name和value
  // LayUI中的单选按钮单击事件的写法
 form.on('radio(radio)', function (data) {
            // 获取元素的name
            var radioName = $(this).attr('name');
            // 有当前key 更新数据 反之，添加数据
            if (myMap.hasOwnProperty(radioName)) {
                var odd = parseInt($(this).val());
                var oldValue =myMap[radioName];
                // 先减去同一name的值，再执行加分的操作
                sum -= parseInt(oldValue);
                sum += odd;
                // 更新分数值
                myMap[radioName] = odd;
            }
            else {
                var newval = parseInt($(this).val());
                // 计算总分
                sum = parseInt(sum) + parseInt(newval);
                // 将name及value以键值对的方式存入Json对象
                myMap[radioName] = newval;
            }
        });
复制代码

页面加载完毕之后初始化Json,适用于从后台获取数据时使用。

         // each遍历被选中按钮，将name和value存入Json
        $("input[type='radio']:checked").each(function (i, e) {
            myMap[$(this).attr('name')] = parseInt($(this).attr("title"));
        });
复制代码

效果图：