JQuery如何判断radio(单选框)是否选中和获取选中值方法_惠州JQuery
作者:黄君发布时间:2020-12-09分类:计算机教程浏览:987
一、利用获取选中值判断选中
直接上代码,别忘记引用JQuery包
代码如下:
<!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>
radio不能用“checked”相等来判断,只用用true来判断
代码如下:
<script type="text/javascript">
$(function () {
$("input").click(function () {
if ($(this).attr("checked")) {
alert("选中了");
}
});
});
</script>
</head>
<body>
<input type="radio"/>
</body>
</html>
二、使用checked属性判断选中
radio不能用“checked”相等来判断,只用用true来判断
代码如下:
<script type="text/javascript">
$(function () {
$("input").click(function () {
if ($(this).attr("checked")) {
alert("选中了");
}
});
});
</script>
</head>
<body>
<input type="radio"/>
</body>
</html>
三、jquery获取radio单选按钮的值
代码如下:
$("input[name='items']:checked").val();
另:判断radio是否选中并取得选中的值
如下所示:
代码如下:
function checkradio(){
var item = $(":radio:checked");
var len=item.length;
if(len>0){
alert("yes--选中的值为:"+$(":radio:checked").val());
}
}
四、获取一组radio被选中项的值
代码如下:
var item = $('input[name=items][checked]').val();
五、设置单选按钮被选中
代码如下:
$("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
相关推荐
- 转职Web前端开发要具备哪些技术?_惠州前端培训学校
- 转行Web前端开发要掌握哪些技术?_惠州前端培训学校
- 如何学习Web前端知识转型?_惠州前端培训学校
- Web前端工程师必须具备哪些JS技巧?_惠州前端培训学校
- Web前端开发|怎么封装几个Vue3中很有用的组合式API?_惠州前端培训学校
- Web前端开发如何使用JS中的arguments?_惠州前端培训学校
- Web前端开发如何在TypeScript中使用基本类型?_惠州前端培训学校
- 优秀Web前端开发工程师必须具备哪些技能?_惠州前端培训学校
- Web前端开发|GraphQL是什么?_惠州前端培训学校
- Web前端工程师要学会哪些技能?_惠州前端培训学校
- 计算机教程排行
-
- 1汕头信息:“公共就业服务进校园”粤东专场在汕头大学举行|||计算机网络培训学校
- 2广州中考成绩公布,高中阶段学校录取控制分数线公布,普高最低控制线502分
- 3江门信息:构建和谐劳动关系优化提升营商环境江门市开展推进新时代和谐劳动关系创建活动|||广州学电脑培训学校
- 4汕头信息:2024年广东省公共就业服务进校园粤东片区专场活动诚邀各用人单位参会|||广州计算机编程培训
- 5清远信息:校企双向奔赴清远市人社部门携企赴省内外高校招才引智|||广州计算机编程培训
- 6惠州信息:2024年第一季度惠州人力资源市场供求情况|||北大青鸟计算机培训中心
- 7江门信息:工伤保险缴费误区:最低工资非缴费基准,违规用人单位将面临法律风险!|||计算机软件培训学校
- 8惠州信息:“惠州市就业驿站巡礼”之惠阳新圩站|||大学生计算机培训学校
- 9汕尾信息:世界技能大赛获奖选手全省巡回宣讲交流活动走进汕尾|||电脑计算机编程培训学校
- 标签列表
-
- Java (3694)
- 北大青鸟 (3713)
- 软件开发 (3613)
- JAVA (3413)
- UI设计入门 (2093)
- 惠州北大青鸟 (4375)
- 惠州IT培训 (2558)
- UI设计培训 (2090)
- 惠州UI设计培训 (2095)
- 惠州UI设计培训学校 (2090)
- 惠州计算机软件培训 (6260)
- 惠州计算件软件开发 (6260)
- 惠州计算机软件基础 (6261)
- 惠州计算机JAVA培训 (3574)
- 惠州计算机Java软件开发 (3620)
- 惠州计算机JAVA软件开发 (4645)
- 惠州计算机JAVA软件开发学校 (3338)
- 惠州计算机Java软件开发培训 (3338)
- 北大青鸟IT计算机学校 (5048)
- 北大青鸟IT软件学校 (5062)
- 北大青鸟IT学校 (5059)
- 惠州计算机UI设计软件开发 (2088)
- UI设计基础教程 (2088)
- UI设计是什么 (2088)
- UI设计教程 (2088)
- 网站分类
-
- 计算机教程
- 计算机入门
- 职业学校
- 新闻动态
- 专业课程
- 热门技术
- SEO
- 培训教程
- windows
- linux教程
- 系统集成
- 网站开发
- Html5
- 办公软件
- 师资力量
- 热点问答
- 联系我们
- 计算机学校
- 惠州计算机学校
- 河源计算机学校
- 广州计算机学校
- 深圳计算机学校
- 湛江计算机学校
- 佛山计算机学校
- IT计算机培训信息
- 设计专业
- UI
- 影视特效
- 游戏动漫设计
- Photoshop
- AI设计
- 软件教程
- Java技术
- C语言/C++语言培训
- C#
- Python技术
- PHP
- 数据库
- SQL Server
- 网络教程
- 网络安全
- 网络营销
- 软件专业
- 大数据专业
- 前端开发专业
- 软件测试专业
- Python专业
- 软件实施
- 珠海计算机学校
- 初中生学什么好
- 计算机认证
- 文章归档
-
- 2025年2月 (26)
- 2024年12月 (15)
- 2024年11月 (45)
- 2024年10月 (32)
- 2024年9月 (29)
- 2024年8月 (68)
- 2024年7月 (59)
- 2024年6月 (43)
- 2024年5月 (48)
- 2024年4月 (80)
- 2024年3月 (65)
- 2024年2月 (54)
- 2024年1月 (25)
- 2023年12月 (12)
- 2023年11月 (73)
- 2023年10月 (134)
- 2023年9月 (34)
- 2023年8月 (3)
- 2023年7月 (3)
- 2023年6月 (12)
- 2023年5月 (30)
- 2023年4月 (72)
- 2023年3月 (11)
- 2023年2月 (34)
- 2023年1月 (37)
- 2022年12月 (78)
- 2022年11月 (359)
- 2022年6月 (1193)
- 2022年5月 (570)
- 2022年4月 (1567)
- 2022年3月 (982)
- 2022年2月 (54)
- 2022年1月 (182)
- 2021年9月 (308)
- 2021年8月 (1704)
- 2021年7月 (2423)
- 2021年6月 (1806)
- 2021年5月 (1569)
- 2021年4月 (1380)
- 2021年3月 (1255)
- 2021年2月 (709)
- 2021年1月 (1521)
- 2020年12月 (3626)
- 2020年11月 (1646)
- 2020年10月 (1046)
- 2020年9月 (592)
- 最近发表
-
- 清远信息:南粤春暖共赴就业新征程清远市举办春季大型招聘活动|||计算机培训学校招生
- 江门信息:为什么要参加企业养老保险DeepSeek告诉你|||大学生计算机培训学校
- 东莞信息:香港劳工及福利局等代表团莅临东莞共促区域人才交流合作新发展|||大学生计算机培训学校
- 东莞信息:莞城街道2025年春风行动暨零工市场招聘活动|||计算机网络培训学校
- 汕头信息:招聘会开进高铁站汕头市南粤春暖专场招聘助力开门红|||计算机网络培训学校
- 江门信息:2025年江门市就业创业政策汇总|||广州计算机软件培训
- 梅州信息:2025年春暖梅州助力稳就业惠民生促发展现场招聘活动|||中专学计算机平面设计女生可以学计算机网络技术好吗
- 湛江信息:2024年乡村振兴人才驿站活动回顾之二赤坎篇|||中专学计算机平面设计女生可以学计算机网络技术好吗
- 汕头信息:新春送岗就在汕头!2025年首场就业洽谈会邀您参加内附参会企业名单|||广州计算机编程培训
- 茂名信息:150企业10000高薪好岗!茂名人社新春大型现场招聘会年初十盛大启幕!内附企业岗位名单|||计算机网络培训学校