单选radio

Dear 丶 2022-01-27 00:11 290阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ_size_16_color_FFFFFF_t_70]方法一

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ_size_16_color_FFFFFF_t_70]: /images/20220127/8593c5f976724ed6bbc5412755b2cc2d.png