点击一个input选中，怎么让第二个input也根据第一个选中的input对应选中起来

图片描述

问题描述

想在（响应等级）选项选中n级，下面（消缺时间）就会对应起来，数据时循环出来的

相关代码

                    <div class="aui-list-item-inner" id="bracket_type">
                        <div class="aui-list-item-title ty-list-li-title">安装方式</div>
                        <div class="aui-list-item-right ty-list-box">
                            <ul>
                                <li class="ty-list-li" v-for="(item7,key) in vidicon.CAMERA_BRACKET_TYPE">
                                    <input id="bracket" class="ty-list-input" type="radio" name="" v-bind:value="key"
                                           v-model="site.bracket_type" v-on:click='onradiotoog(this)'>
                                    <label for="bracket">{{item7}}</label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="aui-list-item" id="ty-list-li">
                    <div class="aui-list-item-inner" id="response_level">
                        <div class="aui-list-item-title ty-list-li-title">响应等级</div>
                        <div class="aui-list-item-right ty-list-box">
                            <ul>
                                <li class="ty-list-li" v-for="(item8,key) in vidicon.DEVICE_RESPONSE_LEVEL">
                                    <input id="res1" class="ty-list-input" type="radio" name="" v-bind:value="key"
                                           v-model="site.response_level" v-on:click="onresponse_level(this)">
                                    <label for="res1">{{item8}}</label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="aui-list-item" id="ty-list-li">
                    <div class="aui-list-item-inner" id="xq_time">
                        <div class="aui-list-item-title ty-list-li-title">消缺时间(h)</div>
                        <div class="aui-list-item-right">
                            <ul>
                                <li class="ty-list-li" v-for="(item9,key) in vidicon.DEVICE_XQ_TIME">
                                    <input id="xq1" class="ty-list-input" type="radio" name="" v-bind:value="key"
                                           v-model="site.xq_time" v-on:click="onxq_time(this)">
                                    <label for="xq1">{{item9}}</label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>

下面是我的尝试

<li class="aui-list-item" id="ty-list-li">
                        <div class="aui-list-item-inner" id="response_level">
                            <div class="aui-list-item-title ty-list-li-title">响应等级</div>
                            <div class="aui-list-item-right ty-list-box">
                                <ul>
                                    <li class="ty-list-li" v-for="(item8,key,index) in vidicon.DEVICE_RESPONSE_LEVEL">
                                        <input id="res1" class="ty-list-input" type="radio" name="res1" v-bind:value="key"
                                               v-model="site.response_level" v-on:click="onresponse_level(this)"  v-on:change="resp($event,index)">
                                        <label for="res1">{{item8}}</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item" id="ty-list-li">
                        <div class="aui-list-item-inner" id="xq_time">
                            <div class="aui-list-item-title ty-list-li-title">消缺时间(h)</div>
                            <div class="aui-list-item-right">
                                <ul>
                                    <li class="ty-list-li" v-for="(item9,key,index) in vidicon.DEVICE_XQ_TIME">
                                        <input name="xq1" id="xq1" class="ty-list-input" type="radio"  v-bind:value="key"
                                               v-model="site.xq_time" v-on:click="onxq_time(this)" >
                                        <label for="xq1">{{item9}}</label>
                                    </li>
                                </ul>
                            </div>
                            <!--<p class="item-p">初始值：撒大大</p>-->
                        </div>
                    </li>

JS部分

        resp(This, index) {
            let a = index + 1;
            document.getElementsByName("xq1")[a - 1].checked = This.currentTarget.checked;
            app.site.xq_time[a - 1] = app.site.response_level[a - 1];
        },

这样两组的radio[index]的checked已经是true 了，但是发现是v-model绑定的数据原因导致无法同步在一起，如果去掉（响应等级）的v-model，就能同步联动一起，然后想了想，在方法里面加一句

            app.site.xq_time[a - 1] = app.site.response_level[a - 1];

但是一样没有效果，请问怎么解决~~

html5 javascript

阅读 3.5k

3 个回答

hermanhe

✓ 已被采纳

如果只是当“响应等级”改变，“消缺时间”对应改变，而“消缺时间”改变，“响应等级”不改变这种条件下，使用@click/@change都可以，只是在“消缺时间”的单选框上需要加上class或者v-ref来获取DOM元素，再改变“消缺时间”的checked属性。大概就是这样了。


<div id="app_radio">
<!-- 单选按钮部分，第一组单选框 -->
<div id="first_radio">
    <li v-for="(item,key,index) in DEVICE_FIRST_LEVEL">
        <input type="radio" name="first_radio" :value="item" @click="radio_change(key,index)" v-model="first_radio_data">
        {{item}}
    </li>
</div>
<!-- 第二组单选框 -->
<div id="seconed_radio">
<li v-for="(item,key,index) in DEVICE_XQ_TIME">
        <input type="radio" name="sec_radio" :value="item" class="sec_radio" v-model="sec_radio_data">
        {{item}}
    </li>

</div>

</div>

<!-- Vue Script 部分 -->
<script>
var vm=new Vue({
el:"#app_radio",
data:{
    DEVICE_XQ_TIME: {
      "T1": "96.0", 
      "T2": "24.0", 
      "T3": "360.0"
    },
    DEVICE_FIRST_LEVEL: {
      "L1": "低", 
      "L2": "中", 
      "L3": "高"
    },
    first_radio_data:"",
    sec_radio_data:""
},
methods:{
    radio_change:function(key,index){
        var get_SecRadio=document.getElementsByClassName('sec_radio');
        this.first_radio_data=this.DEVICE_FIRST_LEVEL[key];
        var get_SecRadio_val=get_SecRadio[index].value;
        this.sec_radio_data=get_SecRadio_val;
    }
}
});
</script>



<!-- 以下部分为更新历史日志，仅作参考 -->
<!-- 单选按钮部分，第一组单选框 -->
<div id="app_radio">
<div id="first_radio_area">
    <li v-for="(item,index) in radio_one">
        <input type="radio" name="first_radio" :value="item" @click="radio_change(index)" v-model="first_radio_data">
        {{item}}
    </li>
</div>
<!-- 第二组单选框 -->
<div id="seconed_radio_area">
<li v-for="(item,index) in radio_sec">
        <input type="radio" name="sec_radio" :value="item" class="sec_radio_btn" v-model="seconed_radio_data">
        {{item}}
    </li>
</div>

</div>

<!-- Vue Script部分 -->
<script>
var vm=new Vue({
el:"#app_radio",
data:{
    radio_one:[1,2,3],
    radio_sec:[24,34,44],
    first_radio_data:'',
    seconed_radio_data:''
},
methods:{
    radio_change:function(index){
        /*  这个是根据checked属性修改“选中”状态
        var get_SecRadio=document.getElementsByClassName('sec_radio_btn');
        for(var i=0;i<get_SecRadio.length;i++){
            //重置第二层所有radio的checked属性
            get_SecRadio[i].checked="false";
        };
        get_SecRadio[index].checked="true";
        */
        
        /*如果是使用v-model来修改，就直接将v-model的值等于radio的value就是“选中”的意思，
        所以可以这样修改*/
        this.first_radio_data=this.radio_one[index];
        this.seconed_radio_data=this.radio_sec[index];
    }
}
});
</script>