<input> 和 <form> 标签
<form> 标记将 HTML 表单添加到网页以供用户输入。
表单将用户提交的数据传递给服务器。
<input> 元素在 <form> 标签中使用,指定用户输入的字段。
字段的类型由 type 属性的值决定。
输入类型之一是收音机,它创建一个单选按钮。
选择一个单选按钮时,将禁用所有其他单选按钮。
单选按钮显示在单选组中,单选按钮是描述相关选项集合的单选按钮集合。
在本教程中,我们将展示使用 jQuery 检查单选按钮的正确方法。
假设我们有以下代码:
<form>
<div id='type'>
<input type='radio' id='radio1' name='type' value='1' />
<input type='radio' id='radio2' name='type' value='2' />
<input type='radio' id='radio3' name='type' value='3' />
</div>
</form>
现在,让我们来看看如何使用 jQuery 进行检查。
对于等于或者高于 1.6 的 jQuery 版本,我们可以使用:
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<input type='radio' id='radio1' name='type' value='1'>Value1 </input>
<input type='radio' id='radio2' name='type' value='2'>Value2 </input>
<input type='radio' id='radio3' name='type' value='3'> Value3 </input>
<script>
$(document).ready(function() {
$("#radio1").prop("checked", true);
});
</script>
</body>
</html>
对于 1.6 之前的版本,我们可以使用:
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-1.5.min.js"></script>
</head>
<body>
<input type='radio' id='radio1' name='type' value='1'>Value1 </input>
<input type='radio' id='radio2' name='type' value='2'>Value2 </input>
<input type='radio' id='radio3' name='type' value='3'> Value3 </input>
<script>
$(document).ready(function() {
$("#radio3").attr('checked', 'checked');
});
</script>
</body>
</html>
我们还可以在末尾添加 .change() 以触发页面上的任何其他事件。
要更新组中的其他单选按钮,我们可以使用:
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<input type='radio' id='radio1' name='type' value='1'>Value1 </input>
<input type='radio' id='radio2' name='type' value='2'>Value2 </input>
<input type='radio' id='radio3' name='type' value='3'> Value3 </input>
<script>
$(document).ready(function() {
$("#radio2").prop("checked", true).trigger("click");
});
</script>
</body>
</html>
日期:2020-06-02 22:16:09 来源:oir作者:oir
