如何确认所选单选按钮

How to confirm the chosen radio button?

本文关键字：单选按钮 确认 何确认      更新时间：2023-09-26

我已经创建了三个单选按钮。我想运行一个函数OnClick，要求用户确认所选的单选按钮，并告知选中的单选按钮值是多少。此外，如果用户不确认选中的单选键，则单选按钮将被取消选择。这是我写的但失败的代码。

<input id="a1" type="radio" name="type" value="A1" onClick= "confirmation();" />A1
<input id="a2" type="radio" name="type" value="A2" onClick="confirmation();" />A2
<input id="a3" type="radio" name="type" value="A3" onClick="confirmation();"/>A3

Javascript

function confirmation() {

if (document.getElementById('a1').checked ) {
ty = document.getElementById('a1').value
var ask= confirm("You have chosen " + ty + " as your type 'n If you have chosen the right type, Click Ok! " )
}
if (document.getElementById('a2').checked) {
level = document.getElementById('a2').value;
var ask= confirm("You have chosen " + ty + " as your Examination Level 'n If you have chosen the right type, Click Ok! " )
}
if (document.getElementById('a3').checked) {
ty = document.getElementById('r1').value;
var ask= confirm("You have chosen " + ty + " as your type 'n If you have chosen the right type, Click Ok! " )
}
    if (ask==true) {
        alert("You clicked ok");
    }
    if (ask==false) {
        alert("You clicked cancel");
    }
}

我认为您可以将其总结为：

function confirmation(obj) {
    obj.checked ? confirm("You have chosen " + obj.value + " as your type 'n If you have chosen the right type, Click Ok!") ? alert("You clicked ok") : obj.checked = false : "";
}
<input id="a1" type="radio" name="type" value="A1" onClick="confirmation(this);" />A1
<input id="a2" type="radio" name="type" value="A2" onClick="confirmation(this);" />A2
<input id="a3" type="radio" name="type" value="A3" onClick="confirmation(this);" />A3

将this传递给函数。this是指DOM对象。

函数可以更简单。您不必检查所有按钮，因为您可以将当前按钮传递到类似onclick="confirmation(this)"的函数中。若要取消选中单选按钮，您需要将checked属性设置为false。

function confirmation(radio) {
    var ask = confirm("You have chosen " + radio.value + " as your type 'n If you have chosen the right type, Click Ok! ")
    
    if (ask) {
        alert("You clicked ok");
    }
    else {
        alert("You clicked cancel");
        radio.checked = false;
    }
}
<input id="a1" type="radio" name="type" value="A1" onclick="confirmation(this)" />A1
<input id="a2" type="radio" name="type" value="A2" onclick="confirmation(this)" />A2
<input id="a3" type="radio" name="type" value="A3" onclick="confirmation(this)" />A3

取消选择时，您需要循环浏览单选按钮以清除它们。您的代码中也有一些小的语法错误，下面将进行更正：

var ty;
function confirmation() {
    if (document.getElementById('a1').checked) {
        ty = document.getElementById('a1').value
        var ask = confirm("You have chosen " + ty + " as your type 'n If you have chosen the right type, Click Ok! ")
    }
    if (document.getElementById('a2').checked) {
        ty = document.getElementById('a2').value;
        var ask = confirm("You have chosen " + ty + " as your Examination Level 'n If you have chosen the right type, Click Ok! ")
    }
    if (document.getElementById('a3').checked) {
        ty = document.getElementById('a3').value;
        var ask = confirm("You have chosen " + ty + " as your type 'n If you have chosen the right type, Click Ok! ")
    }
    if (ask == true) {
        alert("You clicked ok");
    }
    if (ask == false) {
        var elem = document.getElementsByName('type');
        for(var i=0;i<elem.length;i++) elem[i].checked = false;
        alert("You clicked cancel");
    }
}

jsFiddle示例

您可以像这样使用-

<input type="radio" value="1" onclick="return confirmation()" name="collections">
<input type="radio" value="2" onclick="return confirmation()" name="collections">
<input type="radio" value="3" onclick="return confirmation()" name="collections">
<script>
function confirmation(){
	if(confirm("Are you sure!"))
	{
		//do your job
	}
	else
	{
		return false;
	}
}
</script>

相关文章：