触发checkbox的click事件时遇到的问题
因一些原因要实现checkbox的单选，实现的方法是当选中一个checkbox时，用jQuery选择除这个刚选中的checkbox外所有已经被选中的checkbox，然后触发其click事件（因为每个checkbox状态改变时要处理一些问题，所以不能直接将其checked状态改为false），但却莫名其妙地进入了无限循环．
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>Untitled Page</title> <script language="javascript" src="jquery-1.4.1-vsdoc.js"></script> <script type="text/javascript"> $(function() { $(':checkbox').click(function(){ alert($(this).attr('checked')); }); $(':checkbox').click(function(){ if($(this).attr('checked')){ $(':checkbox:checked').not(this).click(); } }); }); </script></head><body> <form id="form1" runat="server"> <div> <input type='checkbox' id='cbx'/> <input type='checkbox' id='cbx2'/> </div> </form></body></html> |
当cbx已被选中再点击cbx2时，首先会先执行cbx2绑定的第一个click函数，其输出为true，说明当单击时先反转checkbox的状态，然后再触发其事件函数，所以在绑定的第二个click函数中，if条件判断为真，所要执行：
$(':checkbox:checked').not(this).click(); |
这句代码选中除刚单击的这个checkbox外的已被选中的checkbox，在这个例子中只有cbx，触发其click事件，如果按照前面所说的先反转其状态再触发事件函数，则执行过程应该是：
执行cbx绑定的第一个click函数，输出false；
执行cbx绑定的第二个click函数数，if条件判断为假，执行完毕．
但实际情况却是无限循环，一直触发这两个checkbox的click函数．如果不是先反转状态再触发事件函数的话，则第一次在cbx2的click函数中if条件判断就为假，也不会导致循环．研究半天，终于搞清状况：
如果用鼠标点击或在其获得焦点时按空格，会先反转其状态再触发其click事件；
而如果通过jQuery用代码触发其click事件，则会先触发click事件再反转状态．
所以如果想实现开始所说的功能的话，只需麻烦一点，先手动改变checked状态为false，然后再触发click事件，而触发click事件后状态再次改变，由false变为true，所以要再次手动改变checked状态：
$(':checkbox:checked').not(this).attr('checked',false).click().attr('checked',false); |
分类:
JavaScript
标签:
JavaScript
, jQuery
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架