javascript - 如何取消选择单选按钮并在单击时重新选择默认按钮？

Question

基本上我想要三个单选按钮。默认选择第一个。您单击第二个，它就会被选中。但是，如果您再次单击第二个，在它已经被选中后，我希望它重新选择第一个。第二个的相同行为也适用于第三个。

标签： javascripthtmlradio-button

Answer 1

我已经使用单选按钮onclick事件功能逻辑来实现所需的功能：

<p>Select your choice:</p>
<div>
    <input type="radio" id="choice1" name="val" value="1" onclick="app(this.value)">
    <label for="choice1">First</label>
    <input type="radio" id="choice2" name="val" value="2" onclick="app(this.value)">
    <label for="choice2">Second</label>
    <input type="radio" id="choice3" name="val" value="3" onclick="app(this.value)">
    <label for="choice3">Third</label>
</div>
<script src="app.js"></script>

应用程序.js：

var radio2Counter = 0;
var radio3Counter = 0;

function app(selectedVal) {

    switch(selectedVal) {
        case '2':
            radio3Counter = 0;
            if (++radio2Counter == 2) {
                document.getElementById('choice1').checked = true;
                radio2Counter = 0;
            }
            break;
        case '3':
            radio2Counter = 0;
            if (++radio3Counter == 2) {
                document.getElementById('choice1').checked = true;
                radio3Counter = 0;
            }
            break;
        default:
            // console.log('Radio 1');
    }
}