触发checkbox的click事件时遇到的问题

最新推荐文章于 2024-06-22 21:00:00 发布

转载最新推荐文章于 2024-06-22 21:00:00 发布 · 641 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/angeldevil/archive/2011/07/28/2119920.html

文章标签：

#javascript #ViewUI

在实现checkbox单选功能时，使用jQuery选择并触发其他已选中checkbox的click事件导致无限循环。问题在于jQuery触发事件时的状态处理与直接用户点击不同。解决方案是先手动改变checkbox的checked状态，再触发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);

转载于:https://www.cnblogs.com/angeldevil/archive/2011/07/28/2119920.html