Question

我正在寻找一种干净简洁的方法来为我的每个复选框添加事件监听器，而不必重复我的Javascript代码，当涉及到JS时，我仍然浑身湿透，所以任何非常感谢你的帮助。

这是我到目前为止的内容

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

选择all并遍历集合并将事件添加到集合中的每个元素。

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

你可以在每个复选框中迭代：

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

希望有所帮助。

干杯

Answer 3

您可以使用for循环并在循环外创建函数。

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>

或者使用ES6，您可以使用具有块范围的let而不是var，因此在每次循环迭代中都会创建新的i。

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>

将eventListener添加到每个复选框

3 个答案: