单选radio

最新推荐文章于 2024-06-11 10:54:21 发布
最新推荐文章于 2024-06-11 10:54:21 发布
阅读量1.1k 收藏 2
点赞数
文章标签： radio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41639609/article/details/90519454
版权

在这里插入图片描述方法一

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .ul-contiener{
            width: 500px;
            margin: 0 auto;
        }
        .question-container{
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        } 
    </style>
</head>
<body>
    <ul class="ul-contiener"></ul>
    <div style="text-align: center;margin-top: 20px;">
        <button>打印结果</button>
    </div>
    


<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(function(){
        // 初始数据
        let data = [
            {
                itemName: "1.我觉得闷闷不乐,情绪低落",
                scoreInfo: [
                    {scoreName: "偶有", score: 1},
                    {scoreName: "有时", score: 2},
                    {scoreName: "经常", score: 3},
                    {scoreName: "持续", score: 4},
                ]
            },
            {
                itemName: "2.我觉得一天中早晨最好",
                scoreInfo: [
                    {scoreName: "偶有", score: 1},
                    {scoreName: "有时", score: 2},
                    {scoreName: "经常", score: 3},
                    {scoreName: "持续", score: 4},
                ]
            },
            {
                itemName: "3.我晚上一阵阵哭出来,或者想哭",
                scoreInfo: [
                    {scoreName: "偶有", score: 1},
                    {scoreName: "有时", score: 2},
                    {scoreName: "经常", score: 3},
                    {scoreName: "持续", score: 4},
                ]
            },
            {
                itemName: "3.我晚上睡眠不好",
                scoreInfo: [
                    {scoreName: "偶有", score: 1},
                    {scoreName: "有时", score: 2},
                    {scoreName: "经常", score: 3},
                    {scoreName: "持续", score: 4},
                ]
            }
        ]

        //渲染数据 => 这里不需要看
        render();
        function render() {
            data.forEach(item => {
                let str = `<li class="question-container">
                                <div>${item.itemName}</div>
                                <div>
                                    <label>
                                        <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[0].score}">
                                        <span>${item.scoreInfo[0].scoreName}</span>
                                    </label>
                                    <label>
                                        <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[1].score}">
                                        <span>${item.scoreInfo[1].scoreName}</span>
                                    </label>
                                    <label>
                                        <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[2].score}">
                                        <span>${item.scoreInfo[2].scoreName}</span>
                                    </label>
                                    <label>
                                        <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[3].score}">
                                        <span>${item.scoreInfo[3].scoreName}</span>
                                    </label>
                                </div>
                            </li>`
                $(".ul-contiener").append(str);
            })
        }

        // 给 type="radio" 绑定mousedown mousedown表示的鼠标按下还没有抬起的事件 

        let flag; //radio点击之前的状态 用来判断是否选中

        $("label").on("mousedown",function(){
            flag = $(this).find("input").prop("checked");
            console.log(flag);
        });

        //当radio被选中是点击 去掉 选中状态
        $("label").on("click",function(){
         
            if(flag){
                $(this).find("input").prop("checked",false);
            }
        });

        //点击打印结果
        $("button").on("click",function(){
            let checkedRadio = $('input:radio:checked');

            console.log(checkedRadio,"checkedRadio");
            console.log(checkedRadio.length,"checkedRadio");
            console.log(data.length,"data");
            let resultArray = []
            for(let i=0;i<checkedRadio.length;i++){
                resultArray.push({
                    itemName: $(checkedRadio[i]).attr("name"),
                    score: $(checkedRadio[i]).attr("data-score")
                })
            }
            console.log(resultArray)
        })  


    })
</script>
</body>
</html>

方法2用原生的js


<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .ul-contiener{
            width: 500px;
            margin: 0 auto;
        }
        .question-container{
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        } 
    </style>
</head>
<body>
    <ul class="ul-contiener"></ul>
    <div style="text-align: center;margin-top: 20px;">
        <button>打印结果</button>
    </div>
    


<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(function(){
        // 初始数据
        let data = [
            {
                itemName: "1.我觉得闷闷不乐,情绪低落",
                scoreInfo: [
                    {scoreName: "偶有", score: 1},
                    {scoreName: "有时", score: 2},
                    {scoreName: "经常", score: 3},
                    {scoreName: "持续", score: 4},
                ]
            },
            {
                itemName: "2.我觉得一天中早晨最好",
                scoreInfo: [
                    {scoreName: "偶有", score: 1},
                    {scoreName: "有时", score: 2},
                    {scoreName: "经常", score: 3},
                    {scoreName: "持续", score: 4},
                ]
            },
            {
                itemName: "3.我晚上一阵阵哭出来,或者想哭",
                scoreInfo: [
                    {scoreName: "偶有", score: 1},
                    {scoreName: "有时", score: 2},
                    {scoreName: "经常", score: 3},
                    {scoreName: "持续", score: 4},
                ]
            },
            {
                itemName: "3.我晚上睡眠不好",
                scoreInfo: [
                    {scoreName: "偶有", score: 1},
                    {scoreName: "有时", score: 2},
                    {scoreName: "经常", score: 3},
                    {scoreName: "持续", score: 4},
                ]
            }
        ]

        //渲染数据
        render();
        function render() {
            data.forEach(item => {
                let str = `<li class="question-container">
                                <div>${item.itemName}</div>
                                <div>
                                    <label>
                                        <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[0].score}">
                                        <span>${item.scoreInfo[0].scoreName}</span>
                                    </label>
                                    <label>
                                        <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[1].score}">
                                        <span>${item.scoreInfo[1].scoreName}</span>
                                    </label>
                                    <label>
                                        <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[2].score}">
                                        <span>${item.scoreInfo[2].scoreName}</span>
                                    </label>
                                    <label>
                                        <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[3].score}">
                                        <span>${item.scoreInfo[3].scoreName}</span>
                                    </label>
                                </div>
                            </li>`
                $(".ul-contiener").append(str);
            })
        }

        // 给 type="radio" 绑定mousedown mousedown表示的鼠标按下还没有抬起的事件 

        let flag; //radio点击之前的状态 用来判断是否选中
        let choose = document.querySelectorAll("label")
        for(let i=0;i<choose.length;i++){

            choose[i].addEventListener("mousedown",function(){
                flag = this.childNodes[1].checked;
            });

            //当radio被选中是点击 去掉 选中状态
            choose[i].addEventListener("click",function(){
                if(flag){
                    this.childNodes[1].checked = false;
                }
            });
        }
        
        

        

        //点击打印结果
        let btn = document.querySelector("button");
        btn.addEventListener("click",function(){
            let checkedRadio = document.querySelectorAll('[type="radio"]');
            
            let resultArray = [];
            for(let i=0;i<checkedRadio.length;i++){
                if(checkedRadio[i].checked){
                    resultArray.push({
                        itemName: checkedRadio[i].getAttribute ("name"),
                        score: checkedRadio[i].getAttribute ("data-score")
                    })
                }
            }
            console.log(resultArray)
        });
    })
</script>
</body>
</html>

编辑默认选中、

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
<script>
    let data = [{"itemName":"1.我觉得闷闷不乐 ,情绪低沉","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 2.我觉得一天之中早晨最好","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"3.我一阵阵哭出来或想哭","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"4.我晚上睡眠不好","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 5.我吃的跟平常一样多","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"* 6.我与异性接触时和以往一样感到愉快","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"7.我发觉我的体重在下降","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"8.我有便秘的苦恼","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"9.我心跳比平时快","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"10.我无缘无故地感到疲乏","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 11.我的脑袋跟平常一样清楚","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"* 12.我觉得经常做的事情并没困难","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"13.我觉得不安而平静不下来","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 14.我对将来抱有希望","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"15.我比平常容易生气激动","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 16.我觉得做出决定是容易的","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"* 17.我觉得自己是个有用的人,有人需要我","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"* 18.我的生活过的很有意思","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"19.我认为如果我死了别人会生活地更好些","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 20.平常感兴趣的事我仍然照样感兴趣","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]}]
    let backData = [{"itemName":"1.我觉得闷闷不乐 ,情绪低沉","score":"1"},{"itemName":"* 2.我觉得一天之中早晨最好","score":"3"},{"itemName":"3.我一阵阵哭出来或想哭","score":"3"},{"itemName":"4.我晚上睡眠不好","score":"3"},{"itemName":"* 5.我吃的跟平常一样多","score":"3"},{"itemName":"* 6.我与异性接触时和以往一样感到愉快","score":"2"},{"itemName":"7.我发觉我的体重在下降","score":"3"},{"itemName":"8.我有便秘的苦恼","score":"3"},{"itemName":"9.我心跳比平时快","score":"3"},{"itemName":"10.我无缘无故地感到疲乏","score":"3"},{"itemName":"* 11.我的脑袋跟平常一样清楚","score":"2"},{"itemName":"* 12.我觉得经常做的事情并没困难","score":"2"},{"itemName":"13.我觉得不安而平静不下来","score":"3"},{"itemName":"* 14.我对将来抱有希望","score":"1"},{"itemName":"15.我比平常容易生气激动","score":"4"},{"itemName":"* 16.我觉得做出决定是容易的","score":"2"},{"itemName":"* 17.我觉得自己是个有用的人,有人需要我","score":"1"},{"itemName":"* 18.我的生活过的很有意思","score":"2"},{"itemName":"19.我认为如果我死了别人会生活地更好些","score":"4"},{"itemName":"* 20.平常感兴趣的事我仍然照样感兴趣","score":"1"}]

    for(let i=0; i<data.length; i++){

        for(let k=0; k<data[i].scoreInfo.length; k++){

            if(data[i].scoreInfo[k].score === Number(backData[i].score)){
                data[i].scoreInfo[k].isChecked = true;
            }else{
                data[i].scoreInfo[k].isChecked = false;
            }
        }
    }

    console.log("backData",backData);
    console.log("data",data);
</script>
</body>
</html>
@呵呵
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
3.2、单选框（Radio）
lujianfeiccie2009的专栏
04-01 384
Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。
按键样式的单选radio按钮与点击事件
linyaodai的博客
01-15 2627
效果 页面代码 配合bootstrap实现 &lt;div id="right_top_wraper"&gt; &lt;div id="right_button" class="button_wraper"&gt; &lt;label for="radio_rt1" class="btn btn-primary"&gt; 本日 &a
radio单选
m0_60611659的博客
07-04 281
实现一个单条数据的radio
JQuery radio（单选按钮）操作方法汇总
最新发布
lx_mai的专栏
06-11 1129
注：attr(“checked”,’checked’)= attr(“checked”, ‘true’)= attr(“checked”, true)如删除第3个Radio:$(“input:radio”).eq(2).remove();5.根据Value值设置Radio为选中值。6.删除Value值为rd2的Radio。2.点击按钮的时候获取id。7.删除第几个Radio。
Radio单选框
qq_37881565的博客
08-25 1万+
Radio单选框 在一组备选项中进行单选 基础用法 使用Radio组件，只需要设置v-model绑定变量，选中意味着变量的值为相应Radiolabel属性的值，label可以是string、number或boolean。 <template> <el-radio v-model="radio" label="1">备选项</el-radio> <el-radio v-model="radio" label="2">备选项</el-ra.
Vue3单选框（Radio）
Mr Dear的博客
03-29 6583
用于在多个备选项中选中单个状态，支持：三种样式选择；禁用；禁用部分选项；垂直排列；自定义间距；设置按钮大小；总之，功能丰富，简单易用😁😁
radio做选择题的单选功能
qq_43036190的博客
10-08 1864
radio做选择题的单选功能 前一段时间做了一个选择答题的一个功能，需求必须的是一个问题三个选项，还必须是单选，而且只能选择一个，在实现的过程中呢，踩了不少坑，今天呢给大家分享一下。 效果呢大概实这样的： 我当时写的时候尝试过很多的方法但是距离我想要的效果还是差那么一点点，功夫不负有心人中终于给我琢磨出来了，之前一直用的点击事件v-click 但是但是我这次换成了@change="selectAlBtnR" @change事件，并且在使用两个radio 分别给他们使用两个不同的v-model赋值，选中就是
微信小程序单选radio及多选checkbox按钮用法示例
11-28
本文主要介绍的是如何使用单选按钮（radio）和多选按钮（checkbox）这两种常见的表单元素。以下是对标题和描述中提及的知识点的详细说明： 1. **单选按钮（radio）**： 单选按钮在微信小程序中通常用于提供一系列...
js单选radio切换
08-11
js 单选 radio切换div
微信小程序如何实现radio单选框单击打勾和取消
10-15
在微信小程序中，实现`radio`单选框的单击打勾和取消功能，开发者需要对小程序的`radio`组件有深入的理解，并掌握相应的样式定制技巧。以下将详细阐述这一过程。 1. **使用`radio`组件** 微信小程序提供了`radio`...
ElementUI浅尝辄止34：Radio 单选框
渣渣砖
09-07 2164
在一组备选项中进行单选。
js实现checkbox的radio单选效果，且可取消选择
02-19
js实现checkbox的radio单选效果，且可取消选择
9.6 单选按钮radio
mmsx2017的博客
03-13 602
一、单选按钮radio 单选按钮radio只能从选项列表中选择一项，选项与选项之间是互斥的。 语法： &lt; input type=”radio” name=”单选按钮所在的组名” value=”单选按钮的取值”/&gt; 二、单选按钮radio的忽略点 name后面的组名是一样的才是单选...
单选框radio总结
a18827547638的博客
06-12 587
1.获取值 $("input[name='killOrder']:checked").val(); $('input:radio:checked').val()； $("input[type='radio']:checked").val(); $(":radio[checked]").each(function(radio){alert($(this).val()); 2.设置第一个Radio为选中值： $('input:radio:first').attr('checked', 'che..
radio单选框操作
yang_zzu的博客
10-01 5931
radio单选框操作 1. 手动进行radio的选中，（初始化里面的语句可以进行手动的选中操作） 2. radio 选择触发事件 <form class="layui-form layui-form-pane" action="" id="userForm"> <input type="radio" name="sex" value="1" title="男" lay-filter="sexFilter"> <input type="radio" na
Form表单之radio单选框操作
热门推荐
陈三的博客
01-11 8万+
input单选框，name相同的单选项为同一单选组： 1.选中某值的项： input单选1组： radio单选项1 radio单选项2 $("input:radio[name='radio1'][value=radio单选项2]").attr("checked","checked");和 $("input[name='radio1'][value=radio单选项2]").attr("ch
单选按钮（radio）
Pianker的博客
03-14 723
效果图：默认选中一个单选按钮。 tr> th> ${message("Promotion.way")}: th> td> label> input type="radio" name="promotionWay" value="bussiness" checked="checked"/> ${message("Pro
Radio 单选框
weixin_30396699的博客
03-09 275
Radio 单选框 在一组备选项中进行单选 ¶基础用法 由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。 要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radiolabel属性的值，label可以是String、Number或Boolean。 <template> &lt...
单选 radio表单校验必填
07-25
单选radio表单校验必填的方法是通过设置规则来实现。在引用\[1\]中的示例代码中，可以看到通过设置`:rules`属性来指定校验规则。在这个例子中，如果选择的值为"0"，则输入框为非必填项，如果选择的值为"1"，则输入框...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值