Click an input to select, how to make the second input also be selected according to the first selected input?

problem description

if you want to select level n in the (response level) option, the following (elimination time) will correspond to the cyclic data

.

related codes

< li class= "aui-list-item" id= "ty-list-li" > 

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

here are my attempts 

<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">:
-->
                        </div>
                    </li>

JS part 

        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];
        },

the checked of the two groups of radio [index] is already true, but it is found that the data bound by v-model can not be synchronized together. If the v-model (response level) is removed, they can be synchronized together. Then think about it and add a sentence

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

but it also has no effect. How to solve ~

?
Javascript html5
Jun.23,2022

write a change event in radio, and modify the deletion time through the index when the response level changes.
in addition, the tag id of your radio is repeated, be unique.

listen for site.response_level in the watch function

if only when "response level" changes, "deletion time" changes correspondingly, and "deletion time" changes, under this condition, "response level" does not change, you can use @ click/@change, but you need to add class or v-ref to the menu box of "deletion time" to get the DOM element, and then change the checked attribute of "deletion time". That's about it. 


<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:"-sharpapp_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:"-sharpapp_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;iPP){
            //radiochecked
            get_SecRadio[i].checked="false";
        };
        get_SecRadio[index].checked="true";
        */
        
        /*v-modelv-modelradiovalue"" 
        */
        this.first_radio_data=this.radio_one[index];
        this.seconed_radio_data=this.radio_sec[index];
    }
}
});
</script>

Previous: How VScode formats react (jsx) code

Next: Use Rollup to convert TS to ES5, how to add polyfill?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu