使用jq的toggle函數實現全選功能遇到的問題

      今天作網站後臺管理的時候，要實現一個單選全選的功能，很簡單的功能，不過，遇到了一個很詭異的問題，寫出來跟你們分享下。

      功能就不贅述了，你們都懂，最初打算使用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");
      }
 });

   

 問題雖然很小，不過略噁心。。。