각 체크 박스에 eventListener 추가하기

Question

자바 스크립트 코드를 반복하지 않아도 각 체크 박스에 이벤트 리스너를 추가 할 수있는 명확하고 간결한 방법을 찾고 있습니다. JS, 그래서 어떤 도움이라도 대단히 감사 할 것입니다. 도움이

var checkboxes = document.querySelectorAll('input[type="checkbox"]'); 
for(var i = 0; i < checkboxes.length; i++){ 
    var checkbox = checkboxes[i]; 
    checkbox.addEventListener('click', function(){ 
     console.log(this); 
    }); 
} 

희망 :

는 여기에 지금까지

function exFunction() {}; 
 

 
// on-click 
 
var x = document.getElementById("checkboxopt"); 
 
x.addEventListener("click", function(){ 
 
    console.log("Opt"); 
 
    }); 
 

 
var y = document.getElementById("checkboxopt1"); 
 
y.addEventListener("click", function(){ 
 
    console.log("Opt 1"); 
 
    }); 
 
var z = document.getElementById("checkboxopt2"); 
 
z.addEventListener("click", function(){ 
 
    console.log("Opt 2"); 
 
    });

<div id=""><input name="checkboxopt" id="checkboxopt" value="true" type="checkbox"><br/></div> 
 
<div id=""><input name="checkboxopt" id="checkboxopt1" value="true" type="checkbox"><br/></div> 
 
<div id=""><input name="checkboxopt" id="checkboxopt2" value="true" type="checkbox"><br/></div>

Answer 1

어느 컬렉션을 통해 모든 루프를 선택하고 컬렉션의 각 요소에 이벤트를 추가 할 수 있습니다.

var cbs = document.querySelectorAll('[type="checkbox"]'); 
 
[].forEach.call(cbs, function (cb) { 
 
    cb.addEventListener("click", function(){ 
 
     console.log(this.id); 
 
    }); 
 
});

<div id="wrap"> 
 
    <div id=""> 
 
    <input name="checkboxopt" id="checkboxopt" value="true" type="checkbox"> 
 
    </div> 
 
    <div id=""> 
 
    <input name="checkboxopt" id="checkboxopt1" value="true" type="checkbox"> 
 
    </div> 
 
    <div id=""> 
 
    <input name="checkboxopt" id="checkboxopt2" value="true" type="checkbox"> 
 
    </div> 
 
</div>

또는 이벤트 대표단이 요소가 클릭 된 것을 알아 내기 위해 이벤트 객체를 사용합니다.

var wrapper = document.getElementById('wrap'); 
 
wrapper.addEventListener("click", function (evt) { 
 
    var elem = evt.target; 
 
    if (elem.name==="checkboxopt") { 
 
     console.log(elem.id); 
 
    } 
 
});

<div id="wrap"> 
 
    <div id=""> 
 
    <input name="checkboxopt" id="checkboxopt" value="true" type="checkbox"> 
 
    </div> 
 
    <div id=""> 
 
    <input name="checkboxopt" id="checkboxopt1" value="true" type="checkbox"> 
 
    </div> 
 
    <div id=""> 
 
    <input name="checkboxopt" id="checkboxopt2" value="true" type="checkbox"> 
 
    </div> 
 
</div>

Answer 2

그럼 당신이 각 확인란을 반복 할 수있을거야.

건배

Answer 3

당신은 for 루프를 사용하여 루프의 외부 기능을 만들 수 있습니다.

또는 ES6 당신이 let 대신 생성됩니다 i 새로운 루프의 각 반복에 있도록 블록 범위가 var 사용할 수 있습니다

var c = document.querySelectorAll('input[type="checkbox"]'); 
 
for (let i = 0; i < c.length; i++) { 
 
    clickFunction(i) 
 
} 
 

 
function clickFunction(num) { 
 
    c[num].addEventListener('click', function() { 
 
    console.log('Opt ' + (num + 1)); 
 
    }) 
 
}

<div id=""><input name="checkboxopt" id="checkboxopt" value="true" type="checkbox"><br/></div> 
 
<div id=""><input name="checkboxopt" id="checkboxopt1" value="true" type="checkbox"><br/></div> 
 
<div id=""><input name="checkboxopt" id="checkboxopt2" value="true" type="checkbox"><br/></div>

.