jQuery에서 javascript의 이벤트 리스너

Question

"CheckAll"이라는 이름의 각 버튼에 체크 - 토글을 추가하는 코드가 있습니다. 최근에 IE 브라우저에서 버튼이 작동하지 않아서 문제가 발생했습니다. outEventListener는 IE에서 작동하지 않으며 attachEvent를 사용해야합니다. 그러나 어떤 사람들은 이것이 결과를 가져올 수 있다고 말하고 있으며 jQuery를 추천하고 있습니다. 그렇다면 누군가 내 JavaScript의 jQuery 버전을 시연 할 수 있습니까? .on : 이 여기에 코드를

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


} 

을 그리고 여기에 jQuery를에서는 jfiddle fiddle

Answer 1

이며, 이벤트를 결합하는 간단한 기능이 있습니다. 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; 
      }); 
     }); 
    }); 
}​);​ 

Answer 2

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

Answer 3

왜 attachEvent를 사용하지 않는? jQuery를 사용하지 않고도 simple crossbrowser addEvent function을 쉽게 만들 수 있습니다.

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