• 触发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);
  • 相关阅读:
    关于使用Java Mail进行邮件发送,抛出Could not connect to SMTP host: xx@xxx.com, port: 25的异常可能
    百度地图和solr展示资源和附近等功能的实现 四
    Python爬虫入门-3
    Python爬虫入门-2
    Python爬虫入门-1
    Python装饰器专题-限制函数调用次数(10s调用一次)
    32个Python爬虫项目让你一次吃到撑
    时间复杂度趣图分析
    各类数据库默认端口总结
    ansible使用三(ansible roles)
  • 原文地址:https://www.cnblogs.com/angeldevil/p/2119920.html
Copyright © 2020-2023  润新知