各チェックボックスにeventListenerを追加

Question

私はJavascriptコードを繰り返すことなくイベントリスナを各チェックボックスに追加するためのきれいで簡潔な方法を探しています.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>

。

var c = document.querySelectorAll('input[type="checkbox"]'); 
 
for (let i = 0; i < c.length; i++) { 
 
    c[i].addEventListener('click', function() { 
 
    console.log('Opt ' + (i + 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>