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

最近项目中有一个类似于调问卷评分的需求，使用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"));
        });
复制代码

效果图：

单选按钮特别适合这种有固定的等级及分数的问卷。

下篇文章将使用复选框实现，复选框适用于有多选的场景

转载于:https://juejin.im/post/5ba339f45188255c43229458