如何使用 JavaScript 或 jQuery 检查单选按钮

1. 使用 JavaScript 检查单选按钮
2. 使用 jQuery 检查单选按钮
3. 根据按钮单击检查单选按钮

我们经常使用诸如 jQuery 或 JavaScript 之类的客户端脚本来创建交互式且性能良好的网站，并且可以高效完成诸如表单验证之类的简单操作，而无需花费额外的时间访问网络服务器。

给定一个场景，我们希望默认情况下或在按钮单击事件上选择单选按钮，我们可以使用 JavaScript 或 jQuery。

让我们首先定义一个表单。

    <div id='radiobuttonset'>
        <input type='radio' id='myradio_1' name='radiobutton' value='1' />1
        <input type='radio' id='myradio_2' name='radiobutton' value='2' />2
        <input type='radio' id='myradio_3' name='radiobutton' value='3' />3 
    </div>

使用 JavaScript 检查单选按钮

使用 ID 选择单选按钮

预先选择单选按钮的最佳方法之一是通过其 ID 进行引用。要使用 ID 选择 DOM 元素，我们在 ID 前面添加前缀 #，并将选中的值设置为 true。

document.querySelector('#myradio_1').checked = true;

输出：单选按钮 1 被选中。

使用值选择单选按钮

另一种选择是使用单选按钮的值来预选单选按钮。在我们不知道单选按钮的 ID 但知道值的情况下，按值选择可能会很有用。

我们可以使用父 div 的 ID 并选择值为 2 的元素。然后可以将 checked 属性设置为 true。

document.querySelector('#radiobuttonset > [value="2"]').checked = true;

输出：单选按钮 2 被选中。

在某些情况下，如果我们知道 DOM 中没有其他元素等于预定义的值，则可以仅通过检查该值来选择该元素。在这种情况下，我们将不需要父 ID。

document.querySelector('[value="3"]').checked = true;

输出：单选按钮 3 被选中。

使用 jQuery 检查单选按钮

除了使用 JavaScript，我们还可以使用 jQuery 库根据预定义的值检查单选按钮。jQuery 是一个使用 JavaScript 构建的库。它有助于简化 HTML DOM 遍历和操作。jQuery 的语法也比 JavaScript 简单。

要添加使用 jQuery，请从 CDN 或本地文件添加对 jQuery 库的引用。

使用 ID 选择单选按钮

像 JavaScript 一样，要使用 ID 访问 DOM 元素，我们使用前缀#。但是，确切的语法取决于所使用的 jQuery 版本。

当前稳定的 jQuery 版本是 3.4.1。

jQuery 的版本等于或大于（>=）1.6

如果使用的 jQuery 版本大于或等于 1.6，我们将使用 prop 将 checked 属性设置为 true。

$('#myradio_1').prop('checked', true);

输出：单选按钮 1 被选中。

jQuery 的版本是（<）1.6 之前的版本

如果 jQuery 版本低于 1.6，我们可以更新 attr 为 checked。

$('#myradio_2').attr('checked', 'checked');

输出：单选按钮 2 已选中

使用值选择单选按钮

我们还可以基于按钮的值更新单选按钮的选定值。

$('input[name=radiobutton][value=\'1\']').prop('checked', true);

输出：单选按钮 2 已选中

根据按钮单击检查单选按钮

一旦我们知道了如何使用 JavaScript 或 jQuery 更新单选按钮，就可以基于某个事件（例如按钮单击或任何其他元素选择的事件）来更新选择。为了测试它，让我们更新表单以添加一个按钮。

<div id='radiobuttonset'>
     <input type='radio' id='myradio_1' name='radiobutton' value='1' />1
     <input type='radio' id='myradio_2' name='radiobutton' value='2' />2
     <input type='radio' id='myradio_3' name='radiobutton' value='3' />3 
</div>
    <button id="button_1">check 1</button>

然后，我们可以在按钮上添加 click 事件。单击时，它选择第一个单选按钮。

$('#button_1').click(function() {
  $('input[name=radiobutton]').val(['1']);
});

输出：单选按钮 1 被选中