📅 最后修改于: 2023-12-03 15:24:13.683000 🧑 作者: Mango
单选按钮通常用于让用户从多个选项中选择一个。但有时需要以编程方式更改单选按钮的状态，例如在响应用户的某些操作或事件时。在 jQuery 中，可以用一些简单的代码来实现这一点。
在 HTML 中，可以使用 <input> 元素来创建单选按钮。单选按钮的类型应该是 radio，并且每个单选按钮应该有一个唯一的 id。例如：
<input type="radio" id="option1" name="options" value="1">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="options" value="2">
<label for="option2">Option 2</label>
在这个例子中，有两个单选按钮，分别具有不同的 id，但是共享相同的 name。这是因为单选按钮必须有相同的 name，这样它们才能被组合在一起，使用户只能选择一个选项。
在 jQuery 中，可以使用 prop() 函数更改单选按钮的状态。prop() 函数允许您获取或设置单选按钮的属性。例如，要设置单选按钮选中或未选中，请使用以下代码：
$('#option1').prop('checked', true);
这将使 id 为 option1 的单选按钮被选中。如果要取消选中单选按钮，请将第二个参数设置为 false：
$('#option1').prop('checked', false);
要检查单选按钮是否选中，请使用以下代码：
if ($('#option1').prop('checked')) {
// Option 1 is selected
} else {
// Option 1 is not selected
}
下面是一个完整示例，它将演示如何使用 jQuery 更改单选按钮的状态：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="radio" id="option1" name="options" value="1">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="options" value="2">
<label for="option2">Option 2</label>
<button id="selectOption1">Select Option 1</button>
<script>
$('#selectOption1').on('click', function() {
$('#option1').prop('checked', true);
});
</script>
</body>
</html>
在这个例子中，有两个单选按钮和一个按钮。当用户单击按钮时，它会触发 click 事件，并使用 jQuery 将 id 为 option1 的单选按钮选中。