Jquery操作<input type="radio">

本文介绍了使用jQuery操作HTML中的Radio按钮的各种方法,包括获取选中的值、设置选中状态、取消选中状态、获取数量、禁用和启用等,并提供了具体的jQuery选择器和属性过滤器示例。
<input type="radio" name="city" value="BeiJing">北京

<input type="radio" name="city" value="TianJin">天津

<input type="radio" name="city" value="NanJing">南京

<input type="radio" name="city" value="YangZhou">扬州

<input type="radio" name="city" value="SuZhou">苏州

[color=red][size=medium]1、获取选中的radio的值[/size][/color]
$("input[name='city']:checked").val();
使用元素选择器,再使用属性过滤器name='city',最后使用:checked选取被选中的元素。

[size=medium][color=red]2、给指定值的radio设置选中状态[/color][/size]
$("input[name='city'][value='YangZhou']").attr("checked",true);
给name="city"而且value="YangZhou"的radio设置选中状态。

[size=medium][color=red]3、取消name="city"的radio的选中状态:[/color][/size]
$('input[name="city"]:checked').attr("checked",false);

[size=medium][color=red]4、获取name="city"的radio的个数:[/color][/size]
$("input[name='city']").length;

[size=medium][color=red]5、获取name="city"而且索引是偶数的radio:[/color][/size]
$("input[name='city']:even");
索引是从0开始的。

[size=medium][color=red]6、获取name="city"而且索引是奇数的radio:[/color][/size]
$("input[name='city']:odd");
索引是从0开始的。

[size=medium][color=red]7、迭代radio:[/color][/size]
$("input[name='city']").each(function(i,obj){
//i,迭代的下标,从0开始
//obj,当前的对象(HTMLInputElement),可以使用obj.value格式获取属性值
//$(this);当前jQuery对象,可以使用$(this).val()获取属性值
});
迭代name="city"的radio。

[size=medium][color=red]8、禁用radio:[/color][/size]
$("input[name='city']").attr("disabled",true);
禁用name="city"的radio。

[size=medium][color=red]9、启用radio:[/color][/size]
$("input[name='city']").attr("disabled",false);
启用name="city"的radio。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> form{ text-align:left; width:1000px; height:1000px; margin:auto; border:10px solid black; background-color: aquamarine; } </style> <form id="registratioForm" > <h1>注册表单</h1> 用户名:<input type = "text" name ="username" ><br> 密码:<input type = "password" name ="password"><br> 确认密码:<input type = "password" name ="password"><br> 注册日期:<input type = "date" name ="date"><br> 电话:<input type = "tel" name ="phone"><br> 邮箱:<input type = "email" name ="email"><br> 年龄:<input type = "text" name ="age"><br> 性别:<label><input type = "radio" name ="gender">男</label> <label><input type = "radio" name ="gender">女<br></label> 照片:<input type = "file" name ="photo"><br> 喜欢的食物:<input type = "checkbox" name ="food" value ="面条">面条 <input type = "checkbox" name ="food" value ="粥">粥 <input type = "checkbox" name ="food" value ="烧烤">烧烤<br> 学历:<select name="degree"> <option value ="1">初中</option> <option value ="2">高中</option> <option value ="3">本科</option> <option value ="4">研究生</option> <option value ="5">博士</option></select><br> <label>个人简介:</label><br> <textarea name ="information" cols="30" rows="10"></textarea><br> <input type = "submit" name ="submit"> <input type = "reset" name ="reset"><br> <input type="button" id="btt" value="点我"> <script src="jQuery.min.js"></script> <pre><p class="textchange" style="text-align:left size:200px" > 点一下文本内容即可改变文本颜色和文本大小 《《不要温和的走入那个良夜》》 Do not go gentle into that good night, Old age should burn and rave at close of day; Rage, rage against the dying of the light. Though wise men at their end know dark is right, Because their words had forked no lightning they Do not go gentle into that good night. Their frail deeds might have danced in a green bay, Wild men who caught and sang the sun in flight, And learn, too late, they grieved it on its way, Grave men, near death, who see with blinding sight And you, my father, there on the sad height, </p ></pre> <botton style ="border:4px double green" onclick = "showAlert()">信息填完点此处</botton> <script> let hasDoubleClicked = false; function showAlert(){ alert('撒花'); } $("#btt").click(function(){ alert("再点一次我就隐藏"); hasDoubleClicked=true; }).click(function(){ if(hasDoubleClicked){ $(this).hide(); } }); $(document).ready(function(){ $("#registratioForm").hide().fadeIn(4000); }); $("input").focus(function(){ $(this).animate({ width:'700%', backgroundColor:'#f0f0f0' },300); }).blur(function(){ $(this).animate({ width:'100%', backgroundColor:'#ffffff' },1000); }); $(".textchange").mousedown(function(){ $(this).animate({ " color":"red", "font-size":"20px" }); }); </script> </form> </body> </html>如何修改代码使文本内容在页面右边 表单在左边并且文本内容在点击后可以变为字体更大 字体颜色变红
10-22
【事件触发一致性】研究多智能体网络如何通过分布式事件驱动控制实现有限时间内的共识(Matlab代码实现)内容概要:本文围绕多智能体网络中的事件触发一致性问题,研究如何通过分布式事件驱动控制实现有限时间内的共识,并提供了相应的Matlab代码实现方案。文中探讨了事件触发机制在降低通信负担、提升系统效率方面的优势,重点分析了多智能体系统在有限时间收敛的一致性控制策略,涉及系统模型构建、触发条件设计、稳定性与收敛性分析等核心技术环节。此外,文档还展示了该技术在航空航天、电力系统、机器人协同、无人机编队等多个前沿领域的潜在应用,体现了其跨学科的研究价值和工程实用性。; 适合人群:具备一定控制理论基础和Matlab编程能力的研究生、科研人员及从事自动化、智能系统、多智能体协同控制等相关领域的工程技术人员。; 使用场景及目标:①用于理解和实现多智能体系统在有限时间内达成一致的分布式控制方法;②为事件触发控制、分布式优化、协同控制等课题提供算法设计与仿真验证的技术参考;③支撑科研项目开发、学术论文复现及工程原型系统搭建; 阅读建议:建议结合文中提供的Matlab代码进行实践操作,重点关注事件触发条件的设计逻辑与系统收敛性证明之间的关系,同时可延伸至其他应用场景进行二次开发与性能优化。
【四旋翼无人机】具备螺旋桨倾斜机构的全驱动四旋翼无人机:建模与控制研究(Matlab代码、Simulink仿真实现)内容概要:本文围绕具备螺旋桨倾斜机构的全驱动四旋翼无人机展开,重点研究其动力学建模与控制系统设计。通过Matlab代码与Simulink仿真实现,详细阐述了该类无人机的运动学与动力学模型构建过程,分析了螺旋桨倾斜机构如何提升无人机的全向机动能力与姿态控制性能,并设计相应的控制策略以实现稳定飞行与精确轨迹跟踪。文中涵盖了从系统建模、控制器设计到仿真验证的完整流程,突出了全驱动结构相较于传统四旋翼在欠驱动问题上的优势。; 适合人群:具备一定控制理论基础和Matlab/Simulink使用经验的自动化、航空航天及相关专业的研究生、科研人员或无人机开发工程师。; 使用场景及目标:①学习全驱动四旋翼无人机的动力学建模方法;②掌握基于Matlab/Simulink的无人机控制系统设计与仿真技术;③深入理解螺旋桨倾斜机构对飞行性能的影响及其控制实现;④为相关课题研究或工程开发提供可复现的技术参考与代码支持。; 阅读建议:建议读者结合提供的Matlab代码与Simulink模型,逐步跟进文档中的建模与控制设计步骤,动手实践仿真过程,以加深对全驱动无人机控制原理的理解,并可根据实际需求对模型与控制器进行修改与优化。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值