因此，检查用户选择哪个单选按钮以了解他们从多个选项中做出的选择非常重要。让我们通过现实生活中的例子来理解它。当您填写任何表格并要求选择性别时，您可以看到他们给您三个选项，而您只能选择一个。
在本教程中，我们将学习两种使用 javascript 检查单选按钮是否被选择的方法。
使用单选按钮的checked属性我们可以使用各种方法访问 javascript 中的 radio 元素。之后，我们可以使用其checked属性来检查所选单选按钮是否被选中。如果checked属性的值为true，则表示该单选按钮被选中；否则不被选中。
语法用户可以按照以下语法使用radio元素的checked属性检查radio按钮是否被选中。
<input type = radio name = radio value = male id = radio1 > male</input> <script> let radio1 = document.getelementbyid('radio1'); if(radio1.checked){ // radio1 is checked }</script>
在上面的语法中，我们使用单选按钮的 id 访问单选按钮，并使用 checked 属性来检查 if 语句中是否选择了单选按钮。
示例在下面的示例中，我们创建了三个包含不同值的单选按钮，例如男性、女性等。在 javascript 中，我们通过 id 访问每个单选按钮，并检查每个单选按钮的“checked”属性的值。
当用户选择任何单选按钮并单击该按钮时，他们会看到一条消息，显示所选单选按钮的值。
<html><body> <h3>using the <i>checked property</i> of the radio button to check whether a radio button is selected.</h3> <input type = radio name = radio value = male id = radio1 > male </input> <br> <input type = radio name = radio value = female id = radio2 > female </input><br> <input type = radio name = radio value = other id = radio3 /> other </input> <p id = output> </p> <button onclick = checkradio()> check radio </button> <script> let output = document.getelementbyid(output); function checkradio(){ // accessing the radio buttons let radio1 = document.getelementbyid('radio1'); let radio2 = document.getelementbyid('radio2'); let radio3 = document.getelementbyid('radio3'); // checking if any radio button is selected if(radio1.checked){ output.innerhtml = the radio button with value + radio1.value + is checked!; } if(radio2.checked){ output.innerhtml = the radio button with value + radio2.value + is checked!; } if(radio3.checked){ output.innerhtml = the radio button with value + radio3.value + is checked!; } } </script></body></html>
示例下面的示例与上面的示例几乎相同，但不同之处在于我们一次使用其名称访问所有单选按钮。 getelementbyname() 方法返回所有名为 radio 的单选元素。
之后，我们使用 for-of 循环遍历单选按钮数组，并使用“checked”属性检查每个单选按钮是否被选中。
<html><body> <h3>using the <i>checked property</i> of the radio button to check whether a radio button is selected</h3> <input type = radio name = radio value = 10 id = radio1> 10 </input> <br> <input type = radio name = radio value = 20 id = radio2> 20 </input> <br> <input type = radio name = radio value = 30 id = radio3 /> 30 </input> <p id = output> </p> <button onclick = getselectedradio()> check radio </button> <script> let output = document.getelementbyid(output); function getselectedradio() { let radiobuttons = document.getelementsbyname('radio'); for (let radio of radiobuttons) { if (radio.checked) { output.innerhtml = the radio button is selected and it's value is + radio.value; } } } </script></body></html>
使用queryselector()方法检查单选按钮是否被选中程序员可以使用 javascript 的 queryselector() 方法来选择任何 html 元素。在这里，我们使用 queryselector() 方法仅选择选中的单选按钮。如果没有选择单选按钮，则返回空值。
语法用户可以按照下面的语法使用queryselector()方法来检查单选按钮是否被选中。
var selected = document.queryselector('input[name=year]:checked');
在上面的语法中，“year”是单选按钮组的名称，它返回属于“year”组并被选中的任何单选按钮。
示例在下面的示例中，我们创建了三个单选按钮，为用户提供三种不同的选择。当用户单击“检查所选年份”按钮时，它会调用 getselectedradio() 函数，该函数使用 queryselector() 方法选择名为“year”的单选按钮，并从 dom 中进行检查。
用户无需选择任何单选按钮即可单击按钮并观察输出。
<html><body> <h3>using the <i> queryselector() method </i> to check whether a radio button is selected.</h3> <input type = radio name = year value = 1999 id = radio1> 1999 </input><br> <input type = radio name = year value = 2021 id = radio2> 2021 </input><br> <input type = radio name = year value = 2001 id = radio3 /> 2001 </input> <p id=output></p> <button onclick=getselectedradio()>check selected year</button> <script> let output = document.getelementbyid(output); function getselectedradio() { var selected = document.queryselector( 'input[name=year]:checked'); if (selected) { output.innerhtml += radio button is selected. } else { output.innerhtml += not any radio button is selected! } } </script></body></html>
用户学习了两种不同的方法来使用 javascript 获取选中的单选按钮。最好的方法是使用 queryselector() 方法，因为我们只需要编写一行代码。
以上就是如何使用 javascript 检查单选按钮是否被选中？的详细内容。