两个单选按钮，如何选择其中一个取消选择另一个

Question

在下面

vue-component

部分提到的代码中，我创建了一个带有两个单选按钮的组件。 我想要实现的是，当选择

idRadioBtnShowGeoTIFFOverlayContainer

中的单选按钮时，应取消选择

idRadioBtnHideGeoTIFFOverlayContainer

中的单选按钮。 换句话说，如果选择了一个单选按钮，则必须取消选择另一个单选按钮并进行相反操作。

在运行时，当我选择单选按钮，然后选择另一个按钮时，之前选择的按钮不会被取消选择

如何修改方法

onShowGeoTIFFOverlayChanged()

和

onHideGeoTIFFOverlayChanged()

来实现这一点

vue 组件

<template>
    <div id="idDivGeoTIFFOverlaySettingsRadioButtonMainLayoutContainer" v-show="isShowGeoTIFFOverlaySettingsRadioButtonMainLayoutContaine">
        <cds-radio id="idRadioBtnShowGeoTIFFOverlayContainer">
            <label id="idText">{{ tempTextOn }}</label>
            <input
                type="radio"
                :value="compPropsVModelShowGeoTIFFOverlayForTS1"
                @input="$emit('update:compPropsVModelShowGeoTIFFOverlayForTS1', $event.target.value)"
                :disabled="isRadioButtonShowGeoTIFFOverlayForTS1Disabled"
                :checked="isCheckedRadioButtonShowGeoTIFFOverlayForTS1"
                @change="onShowGeoTIFFOverlayChanged()"
            />
        </cds-radio>

        <cds-radio id="idRadioBtnHideGeoTIFFOverlayContainer">
            <label id="idText">{{ tempTextOff }}</label>
            <input
                type="radio"
                :value="compPropsVModelHideGeoTIFFOverlayForTS1"
                @input="$emit('update:compPropsVModelHideGeoTIFFOverlayForTS1', $event.target.value)"
                :disabled="isRadioButtonHideGeoTIFFOverlayForTS1Disabled"
                :checked="isCheckedRadioButtonHideGeoTIFFOverlayForTS1"
                @change="onHideGeoTIFFOverlayChanged()"
            />
        </cds-radio>
    </div>
</template>

<script>
import { GeoTIFFOverlaySettingsConstants } from '../../resources/GeoTIFFOverlaySettings/GeoTIFFOverlaySettingsConstants.js';

export default {
    name: 'GeoTIFFOverlaySettingsTS1RadioButtons',
    data() {
        return {
            tempTextOn: GeoTIFFOverlaySettingsConstants.CONST_STRING_ON.description,
            tempTextOff: GeoTIFFOverlaySettingsConstants.CONST_STRING_OFF.description,
        };
    },
    components: {},
    props: {
        isShowGeoTIFFOverlaySettingsRadioButtonMainLayoutContaine: {
            type: Boolean,
            default: true,
        },
        isCheckedRadioButtonShowGeoTIFFOverlayForTS1: {
            type: Boolean,
            default: null,
        },
        isCheckedRadioButtonHideGeoTIFFOverlayForTS1: {
            type: Boolean,
            default: null,
        },
        isRadioButtonShowGeoTIFFOverlayForTS1Disabled: {
            type: Boolean,
            default: true,
        },
        isRadioButtonHideGeoTIFFOverlayForTS1Disabled: {
            type: Boolean,
            default: true,
        },
        VModelShowGeoTIFFOverlayForTS1: {
            type: null,
        },
        VModelHideGeoTIFFOverlayForTS1: {
            type: null,
        },
    },
    emits: {
        'update:VModelShowGeoTIFFOverlayForTS1': null,
        'update:VModelHideGeoTIFFOverlayForTS1': null,
    },
    computed: {
        compPropsVModelShowGeoTIFFOverlayForTS1: {
            get() {
                return this.VModelShowGeoTIFFOverlayForTS1;
            },
            set(value) {
                this.$emit('update:VModelShowGeoTIFFOverlayForTS1', value);
            },
        },
        compPropsVModelHideGeoTIFFOverlayForTS1: {
            get() {
                console.log('get.compPropsVModelHideGeoTIFFOverlayForTS1:', this.VModelHideGeoTIFFOverlayForTS1);
                return this.VModelHideGeoTIFFOverlayForTS1;
            },
            set(value) {
                console.log('set.compPropsVModelHideGeoTIFFOverlayForTS1:', value);
                this.$emit('update:VModelHideGeoTIFFOverlayForTS1', value);
            },
        },
    },
    methods: {
        onShowGeoTIFFOverlayChanged() {
            this.compPropsVModelShowGeoTIFFOverlayForTS1 = true;
            this.compPropsVModelHideGeoTIFFOverlayForTS1 = false;
            this.isCheckedRadioButtonShowGeoTIFFOverlayForTS1 = true;
            this.isCheckedRadioButtonHideGeoTIFFOverlayForTS1 = false;
        },
        onHideGeoTIFFOverlayChanged() {
            this.compPropsVModelShowGeoTIFFOverlayForTS1 = false;
            this.compPropsVModelHideGeoTIFFOverlayForTS1 = true;
            this.isCheckedRadioButtonShowGeoTIFFOverlayForTS1 = false;
            this.isCheckedRadioButtonHideGeoTIFFOverlayForTS1 = true;
        },
    },
};
</script>

<style>
@import '../../../../map/assets/css/NDVIComparisonTab/RadioButtons/GeoTIFFOverlay/GeoTIFFOverlaySettingsTS1RadioButtons.css';
</style>

Answer 1

为两个单选按钮指定相同的 HTML“名称”属性

<input type='radio' name='gender' value='male'> <label>Male</label>
<input type='radio' name='gender' value='female'> <label>female</label>