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 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");}}); ? ?

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

轉載于:https://my.oschina.net/u/1023800/blog/177214

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的使用jq的toggle函数实现全选功能遇到的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。