html或者VUE循环的单选框并取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
    <div id="Vue">
        <div  v-for="item in list">
            <p>{{item.title}}</p>
            <div v-for="val in item.ridio">
                <input type="radio" :name="val.name" :value="val.value">{{val.value}}
            </div>
        </div>
        <button @click="fn">获取</button>
    </div>
</body>
<script>
    var inpArr = document.getElementsByTagName("input"),
        result = ""
    new Vue({
        el:"#Vue",
        data:{
            list:[
                {
                    title:"我是你爷爷",
                    ridio:[
                        {
                            name:"a",
                            value:'a1'
                        },
                        {
                            name:"a",
                            value:'a2'
                        }
                    ]
                },
                {
                    title:"我是你爸爸",
                    ridio:[
                        {
                            name:"b",
                            value:'a1'
                        },
                        {
                            name:"b",
                            value:'a2'
                        }
                    ]
                }
            ]
        },
        methods:{
            fn(){
                result = "";
                for(var i=0;i<inpArr.length;i++){
                    if(inpArr[i].checked){
                        result+=inpArr[i].value+" ";
                    }
                }
                alert(result)
            }
        },
        created(){
            // $.ajax({
            //     type: "get",	//请求方式
            //     async: false,
            //     url: "",
            //     data: {},		//传值给后台
            //     dataType: "json",
            //     success: function (res) {
            //         console.log(res)
            //
            //     },
            // });
        }
    })


</script>
</html>

发布了151 篇原创文章 · 获赞 1 · 访问量 2788

猜你喜欢

转载自blog.csdn.net/hql1024/article/details/103631289
今日推荐