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

      功能就不赘述了，大家都懂，最初打算使用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 closurevar args = arguments,guid = fn.guid || jQuery.guid++,i = 0,toggler = function( event ) {// Figure out which function to executevar lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );// Make sure that clicks stopevent.preventDefault();// and execute the functionreturn args[ lastToggle ].apply( this, arguments ) || false;};// link all the functions, so any of them can unbind this click handlertoggler.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");}});

   

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