使用jq的toggle函数实现全选功能遇到的问题

2019独角兽企业重金招聘Python工程师标准>>>

      今天做网站后台管理的时候，要实现一个单选全选的功能，很简单的功能，不过，遇到了一个很诡异的问题，写出来跟大家分享下。

      功能就不赘述了，大家都懂，最初打算使用jq的toggle函数来绑定两个处理方法，一个实现全选，一个取消全选。

$("input[data-id='checkall']").toggle(
     function(){
         $("input[type='checkbox'][name='choice']").attr("checked","checked");
     },
     function(){
         $("input[type='checkbox']name='choice']").removeAttr("checked");
     }
)

         本以为到这这样就完成了，不过，后来测试的时候，神奇的bug发生了。

 

        红色框框标记的那个复选框，无论如何都选不上，其他复选框倒是正常，各种纠结、折腾，最终决定去看看jq的源码，是不是toggle这个函数有神马问题。

     

toggle: function( fn ) {
		// Save reference to arguments for access in closure
		var args = arguments,
	            guid = fn.guid || jQuery.guid++,
		    i = 0,
		    toggler = function( event ) {
		    // Figure out which function to execute
		    var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
		    jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );

		    // Make sure that clicks stop
		    event.preventDefault();

		    // and execute the function
		    return args[ lastToggle ].apply( this, arguments ) || false;
		};

		// link all the functions, so any of them can unbind this click handler
		toggler.guid = guid;
		while ( i < args.length ) {
			args[ i++ ].guid = guid;
		}

		return this.click( toggler );
	}

    玄机显现，就是这句event.preventDefault()，导致复选框无法被选中，最后，还是老老实实的加了个自定义属性，用绑定了click事件来实现。

$("input[data-id='checkall']").click(function(){
      if($(this).attr("is-check") == "0")
      {
          $("input[type='checkbox'][name='choice']").attr("checked","checked");
          $(this).attr("is-check","1");
      }
      else{
          $("input[type='checkbox'][name='choice']").removeAttr("checked");
          $(this).attr("is-check","0");
      }
 });

   

 问题虽然很小，不过略恶心。。。

转载于:https://my.oschina.net/u/1023800/blog/177214