2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

? ? ? 今天做網(wǎng)站后臺(tái)管理的時(shí)候，要實(shí)現(xiàn)一個(gè)單選全選的功能，很簡(jiǎn)單的功能，不過，遇到了一個(gè)很詭異的問題，寫出來跟大家分享下。

? ? ? 功能就不贅述了，大家都懂，最初打算使用jq的toggle函數(shù)來綁定兩個(gè)處理方法，一個(gè)實(shí)現(xiàn)全選，一個(gè)取消全選。

$("input[data-id='checkall']").toggle(function(){$("input[type='checkbox'][name='choice']").attr("checked","checked");},function(){$("input[type='checkbox']name='choice']").removeAttr("checked");} ) ? ? ? ? ?本以為到這這樣就完成了，不過，后來測(cè)試的時(shí)候，神奇的bug發(fā)生了。

?

? ? ? ? 紅色框框標(biāo)記的那個(gè)復(fù)選框，無論如何都選不上，其他復(fù)選框倒是正常，各種糾結(jié)、折騰，最終決定去看看jq的源碼，是不是toggle這個(gè)函數(shù)有神馬問題。

? ? ?

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

? ? 玄機(jī)顯現(xiàn)，就是這句event.preventDefault()，導(dǎo)致復(fù)選框無法被選中，最后，還是老老實(shí)實(shí)的加了個(gè)自定義屬性，用綁定了click事件來實(shí)現(xiàn)。

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

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

轉(zhuǎn)載于:https://my.oschina.net/u/1023800/blog/177214

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。