Jquery checkbox全选,反选,全不选实例
<!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> <title></title> <script type= "text/javascript" src= "</script'>http://www.bannei.com/site_media/js/jquery-1.4.2.min.js" ></script> <script type= "text/javascript" > $( function () { //全选 $( "#checkAll" ).click( function () { $( "[name='items']:checkbox" ).attr( "checked" , true ); }); //反选 $( "#checkOpp" ).click( function () { $( "[name='items']:checkbox" ).each( function () { $( this ).attr( "checked" , !$( this ).attr( "checked" )); }); }); //全不选 $( "#checkNO" ).click( function () { $( "[name='items']:checkbox" ).attr( "checked" , false ); }); $( "#SubmitID" ).click( function () { var Str = "你选中的是:\n\r" ; $( "[name='items']:checkbox:checked" ).each( function () { Str += $( this ).val() + "\n\r" ; }); alert(Str); }); }); </script> </head> <body> <form> <fieldset> <legend>你爱好的运动是?</legend> <div id= "DIV1" > <input type= "checkbox" name= "items" value= "足球" />足球 <input type= "checkbox" name= "items" value= "篮球" />篮球 <input type= "checkbox" name= "items" value= "乒乓球" />兵乓球 <input type= "checkbox" name= "items" value= "跑步" />跑步 <input type= "checkbox" name= "items" value= "踢毽子" />踢毽子 <input type= "checkbox" name= "items" value= "俯卧撑" />俯卧撑 <input type= "checkbox" name= "items" value= "羽毛球" />羽毛球 </div> <br> <input type= "button" value= "全选" id= "checkAll" /> <input type= "button" value= "反选" id= "checkOpp" /> <input type= "button" value= "全不选" id= "checkNO" /> <input type= "button" value= "取值" id= "SubmitID" /> </fieldset> </form> </body> </html> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述
2011-01-12 数学与物理是编程提升的瓶颈