JavaScript中的Eventlistener到jQuery

我有一個代碼，將檢查全部切換添加到名爲「CheckAll」的每個按鈕我最近遇到了一個問題，從IE瀏覽器中，按鈕不工作，我發現out addEventListener在IE中不起作用，並且你必須使用attachEvent，但是有些人說這也可能有後果，並且他們推薦jQuery。那麼有人可以演示我的javaScript的jQuery版本嗎？下面的代碼JavaScript中的Eventlistener到jQuery

function script1(){ 
var el = document.getElementsByName('CheckAll'); 
el1 = el[0]; 
el2 = el[1]; 
el3 = el[2]; 
el4 = el[3]; 
el5 = el[4]; 
el6 = el[5]; 
el7 = el[6]; 



el1.addEventListener('click', function(){selectAll(0,8)}, false); 
el2.addEventListener('click', function(){selectAll(8,16)}, false); 
el3.addEventListener('click', function(){selectAll(16,26)}, false); 
el4.addEventListener('click', function(){selectAll(26,34)}, false); 
el5.addEventListener('click', function(){selectAll(34,44)}, false); 
el6.addEventListener('click', function(){selectAll(44,52)}, false); 
el7.addEventListener('click', function(){selectAll(52,60)}, false); 


}

，這裏是一個jfiddle fiddle

來源

2012-08-22 lonewaft

'el1.addEventListener（ '點擊'，函數（）{全選（0,8）}，假）;' - >'$（EL1）。在（ '點擊'，函數（）{ selectAll（0,8）}）;'見http://api.jquery.com/on/ – Musa

SO不是代碼翻譯服務。請閱讀jQuery文檔。 –

在jQuery中，有將事件綁定一個簡單的函數：.on。您可以使用CSS符號使用$函數選擇元素：http://jsfiddle.net/VHXDx/11/。這是已所需的所有，未經selectAll功能：

// run when elements are available 
$(function() { 
    // select the `CheckAll` buttons and run a function for each one 
    $("input[name='CheckAll']").each(function(i) { // `i` is a counter 
     // bind event 
     $(this).on("click", function() { 
      // select `AG[]` elements in the current row and toggle their checked property 
      $(this).closest("tr").find("[name='AG[]']").prop("checked", function(j, current) { 
       return !current; 
      }); 
     }); 
    }); 
});

來源

2012-08-22 20:37:53 pimvdb

這完美的作品！謝謝！ – lonewaft

function script1(){ 
    var el = $('[name="CheckAll"]'); 
    el.on('click', function() { 
     $(this).closest('td').siblings().find('input[name="AG[]"]').each(function(i,e) { 
      e.checked = !e.checked; 
     }); 
    }); 
}

FIDDLE

來源

2012-08-22 20:39:58 adeneo

爲什麼不使用attachEvent？您可以輕鬆構建simple crossbrowser addEvent function而不使用jQuery。

var add = document.addEventListener ? function(el, type, fn) { 
    el.addEventListener(type, fn, false); 
} : function(el, type, fn) { 
    el.attachEvent("on"+type, fn.bind(el), false); 
}; 

function script1(){ 
    var els = document.getElementsByName('CheckAll'); 
    var a = 1, b = 0; 
    for (var i=0; i<els.length; i++) { 
     a *= -1; 
     add(els[i], 'click', selectAll.bind(null, b, b+= 9+a)); 
    } 
}

來源

2012-08-22 20:50:54 Bergi

我不確定使用'.bind'是否合理，但不要假設'.addEventListener'。 – pimvdb

我認爲它比'addEventListener'更簡單。另外，如果沒有'bind'代碼就會變成一個可怕的關閉混亂:-) – Bergi

JavaScript中的Eventlistener到jQuery

回答

相關問題