使用 javascript 和 html 选中/取消选中单选按钮

Question

请指教，如何使用javascript取消选中单选按钮？ 我检查了类似的问题，但无法弄清楚。

function uncheck1(){
    let chkstatus = document.getElementById("radiobtn1").checked;
    if (chkstatus==true) {
        document.getElementById("radiobtn1").checked = false;
    } else if (chkstatus==false){
        document.getElementById("radiobtn1").checked = true;
    } 
}

<input onclick="uncheck1()" id="radiobtn1" name="grp1" type="radio" value="prashant">prashant</input>

单击后条件为真，脚本将值设置为假，因此根本没有选择值。 请告知具体需要修改的地方？

Answer 1

当您单击单选按钮时，onClick 事件将始终认为该单选已被选中，因为这就是单选的工作方式。相反，使用第二个 var 来跟踪打开状态，然后相应地设置状态....

var checked = false;
function uncheck1(){
    if(checked) {
         document.getElementById("radiobtn1").checked = false;
         checked = false;
         return;
    }
    checked = true;
}

<input onclick="uncheck1()" id="radiobtn1" name="grp1" type="radio" value="prashant">prashant</input>

我现在可以点击收音机，看到它被选中，再次点击它，看到它被取消选中。

Answer 2

添加一个按钮来切换单选按钮。你会看到它确实有效。

  <input type="button" onclick="uncheck1()" />

这是因为您正在切换收音机 onclick 并使用该功能再次执行相同的操作。所以实际上你切换了两次检查状态。

最终代码：

<input id="radiobtn1" name="grp1" type="radio" value="prashant" /> <label for="radiobtn1">prashant</label>

<input type="button" onclick="uncheck1()" />

从收音机中移除 onclick 并添加适当的标签以使收音机按预期工作。