javascript - 取消选择 radio 输入选择

Question

在我的应用程序的一部分中，我检查是否有重复的 radio 输入选择，如果它已经被选中，则恢复为早期选择。

这是我的 html 代码..

<input type="radio" name="A" checked="checked" onclick="return check();" />
<input type="radio" name="A" onclick="return check();" />

<br />

<input type="radio" name="B"  onclick="return check();" />
<input type="radio" name="B" checked="checked" onclick="return check();" />

这是javascript代码

function check() {
    //logic to check for duplicate selection
    alert('Its already selected');
    return false;
}

这里是 demo 上面的代码工作正常。问题是最初未检查输入时。在这种情况下， radio 输入选择不会恢复为未选中状态。

注意:当处于选中状态时，返回 false 显示并警告并将复选框设置为初始选中状态。但是当最初处于非选中状态时，这不起作用。

Answer 1

在 DOM 就绪状态下，检查是否选中了任何单选按钮。如果选中任何单选按钮，则将计数器加一。在单选按钮的onclick中，检查计数器值是否为1。如果是，则返回false，否则将计数器增加1。

试试这段代码，

html

<input type="radio" name="A" checked="checked" />
<input type="radio" name="A" />
<br />
<input type="radio" name="B" />
<input type="radio" name="B" />

JS

var counterA = 0;
var counterB = 0;
$(document).ready(function () {
    if ($("input:radio[name=A]").is(":checked") == true) counterA++;
    if ($("input:radio[name='B']").is(":checked") == true) counterB++;
});

$('input:radio[name=A]').click(function () {
    if (counterA == 1) {
        alert('already checked');
        return false;
    } else {
        counterA++;
    }
});
$('input:radio[name=B]').click(function () {
    if (counterB == 1) {
        alert('already checked');
        return false;
    } else {
        counterB++;
    }
});

查看此 DEMO