jQuery 怎么判断单选按钮是否选中? 下面本篇文章给大家介绍一下使用 jQuery 判断单选按钮是否选中的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
jQuery 判断 radio(单选框) 是否选中的方法
第一种: 利用选中值判断选中
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- jQuery radio
- </title>
- <script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js">
- </script>
- <script type="text/javascript" language="javascript">
- /*------ 判断 radio 是否有选中, 获取选中的值 --------*/
- $(function() {
- $("#btnSubmit").click(function() {
- var val = $('input:radio[name="sex"]:checked').val();
- if (val == null) {
- alert("什么也没选中!");
- return false;
- } else {
- alert(val);
- }
- var list = $('input:radio[name="list"]:checked').val();
- if (list == null) {
- alert("请选中一个!");
- return false;
- } else {
- alert(list);
- }
- });
- });
- </script>
- </head>
- <body>
- <form id="form1">
- <input type="radio" name="sex" value="男" />
- 男
- <input type="radio" name="sex" value="女" />
- 女
- <br />
- <input type="radio" name="list" value="十分满意" />
- 十分满意
- <input type="radio" name="list" value="满意" />
- 满意
- <input type="radio" name="list" value="不满意" />
- 不满意
- <input type="radio" name="list" value="非常差" />
- 非常差
- <br />
- <input type="submit" value="submit" id="btnSubmit" />
- </form>
- </body>
- </HTML>
第二种: 利用 checked 属性判断选中
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- jQuery radio
- </title>
- <script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js">
- </script>
- <script type="text/javascript">
- $(function() {
- $("input").click(function() {
- if ($(this).attr("checked")) {
- alert("选中了");
- }
- });
- });
- </script>
- </head>
- <body>
- <input type="radio" />
- </body>
- </HTML>
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/17115.html