如何为多个复选框绑定click事件处理程序？

时间：2017-02-01 10:15:31

标签： javascript html events

如何添加当前复选的div的边框复选框。作为基础，我使用了实际经历了非常类似功能的在线课程的代码。不幸的是，在更改之后，它无法正常工作。

HTML 

<div id="checkbox">
  <label>
    <input id="highlightall" type="checkbox"> Check all
  </label>
</div>
<div class="checkboxall">
  <div class="box">
    <label>
      <input class="highlight" type="checkbox"> Checkbox1
    </label>
  </div>
  <div class="box">
    <label>
      <input class="highlight" type="checkbox"> Checkbox2
    </label>
  </div>
  <div class="box">
    <label>
      <input class="highlight" type="checkbox"> Checkbox3 
    </label>
  </div>
</div>

和Javascript文件

function preparePage() {
  document.getElementsByClassName("highlight").onclick = function() {
    if (document.getElementsByClassName("highlight").checked) {
      // use CSS style to show it
      document.getElementsByClassName("box").style.border = "thick solid #0000FF";
    } else {
      // hide the div
      document.getElementsByClassName("box").style.border = "none";
    }
  };
  // now hide it on the initial page load.
  document.getElementsByClassName("box").style.border = "none";
}

window.onload = function() {
  preparePage();
};

此外，这里是jsfiddle链接：https://jsfiddle.net/ohth2n7e/1/

感谢您的时间！

4 个答案:

答案 0 :(得分：2)

全部工作。选择所有。然后单击

＆＃13;
＆＃13; 
document.getElementById('highlightall').onclick = function(){
var border = document.getElementsByClassName("highlight");
   for(i=0;i < border.length; i++)
   {
    border[i].checked = (this.checked)? true : false;
   }
}
  var border = document.getElementsByClassName("highlight");
  for(i=0;i < border.length; i++)
  {
  border[i].addEventListener("click", function() {
    if (this.checked) {
       this.parentElement.style.border = "thick solid #0000FF";
    } else {
       this.parentElement.style.border = "none";
    }
  });
  
}
＆＃13; 
.checkboxall {
background:#222;
padding:10px;
color:#fff;
}
＆＃13; 
<div id="checkbox">
  <label>
    <input id="highlightall" type="checkbox"> Check all
  </label>
</div>
<div class="checkboxall">
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox1
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox2
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox3 
    </label>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

document.getElementsByClassName会返回NodeList，您需要为每个人绑定点击event处理程序。

要设置复选框border，您需要使用outlineColor和outlineStyle属性。

对于绑定event处理程序，您必须使用for循环并为每个checkbox DOM元素附加事件处理程序。

var checkboxes=document.getElementsByClassName("highlight");
for(var i=0;i<checkboxes.length;i++){
    checkboxes[i].onclick=function(){
      console.log("Current index: "+i);
      if (checkboxes[i].checked) {
        checkboxes[i].style.outlineColor = "red";
        checkboxes[i].style.outlineStyle = "solid";
      } else {
        checkboxes[i].style.outlineColor = "none";
        checkboxes[i].style.outlineStyle = "none";
      }
    };
}
.checkboxall {
background:#222;
padding:10px;
color:#fff;}
<div id="checkbox">
  <label>
    <input id="highlightall" type="checkbox"> Check all
  </label>
</div>
<div class="checkboxall">
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox1
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox2
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox3 
    </label>
  </div>
</div>

但如果你看，它会显示errors。这是因为当页面loads时，preparePage被调用并创建了context。当您点击checkbox元素时，saved变量的最后一个值i将为3（如上面的代码段所示）。

  

为什么会出现这种情况？

因为preparePage()函数中只有一个范围，所以i变量仅绑定到该范围内的值。换句话说，每次循环更改i的值时，它会更改在该范围内引用它的所有内容。

循环结束后，i变量的值为3。

有人说，一种解决方案是使用let关键字。

var checkboxes=document.getElementsByClassName("highlight");
for(let i=0;i<checkboxes.length;i++){
    checkboxes[i].onclick=function(){
      if (checkboxes[i].checked) {
        checkboxes[i].style.outlineColor = "red";
        checkboxes[i].style.outlineStyle = "solid";
      } else {
        checkboxes[i].style.outlineColor = "none";
        checkboxes[i].style.outlineStyle = "none";
      }
    };
}
.checkboxall {
background:#222;
padding:10px;
color:#fff;}
<div id="checkbox">
  <label>
    <input id="highlightall" type="checkbox"> Check all
  </label>
</div>
<div class="checkboxall">
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox1
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox2
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox3 
    </label>
  </div>
</div>

另一种方法是使用Immediately-invoked function expression。

对于closures，请查看here。

var checkboxes=document.getElementsByClassName("highlight");
for(var i=0;i<checkboxes.length;i++){
   (function(index){
    checkboxes[index].onclick=function(){
      if (checkboxes[index].checked) {
        checkboxes[index].style.outlineColor = "red";
        checkboxes[index].style.outlineStyle = "solid";
      } else {
        checkboxes[index].style.outlineColor = "none";
        checkboxes[index].style.outlineStyle = "none";
      }
    };
   }(i));
}
.checkboxall {
background:#222;
padding:10px;
color:#fff;}
<div id="checkbox">
  <label>
    <input id="highlightall" type="checkbox"> Check all
  </label>
</div>
<div class="checkboxall">
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox1
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox2
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox3 
    </label>
  </div>
</div>

答案 2 :(得分：0)

注意：document.getElementsByClassName引用元素组

除了document.getElementsByClassName（“highlight”）之外，您可以使用document.getElementById（“highlightall”）

将您的Javascript文件更改为

function preparePage() {

document.getElementById("highlightall").onclick = function() {

if (document.getElementById("highlightall").checked) {

  // use CSS style to show it
  document.getElementsByClassName("checkbox")[0].style.border = "thick solid #FFFFFF";
} else {
  // hide the div
  document.getElementsByClassName("checkbox")[0].style.border = "none";
}
}
// now hide it on the initial page load.
document.getElementsByClassName("checkbox")[0].style.border = "none";
}

window.onload = function() {
 preparePage();
};

我认为这可能会对你有所帮助

由于

答案 3 :(得分：0)

我在我的代码中完成了以下方法，它对我有所帮助。

在选中一个复选框时，我预先定义了一个类选择器名responded，当选中该复选框时，它会动态添加到复选框中，并在我听到我们的时候添加了一个change监听器DOM改变并操纵它。

因此，复选框周围会显示漂亮的边框。

const form = document.getElementById('registrar');
const input = form.querySelector('input');
const ul = document.getElementById('invitedList');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value;
  input.value = '';
  const li = document.createElement('li');
  li.textContent = text;
  const label = document.createElement('label');
  label.textContent = 'Confirmed';
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  label.appendChild(checkbox); 
  li.appendChild(label);
  ul.appendChild(li);
});
  
ul.addEventListener('change', (e) => {
  const checkbox = event.target;
  const checked = checkbox.checked;
  const listItem = checkbox.parentNode.parentNode;
  
  if (checked) {
    listItem.className = 'responded';
  } else {
    listItem.className = '';
  }
});  
/* responded */
.responded {
  transition: 0.4s;
  border-color: rgba(88, 183, 205, .9);
}
.responded label {
  transition: 0.4s;
  color: rgba(88, 183, 205, 1);
}
<body>
  <div class="wrapper">
    <header>
      <h1>RSVP</h1> 
      <p>A Demo App</p>
      <form id="registrar">
        <input type="text" name="name" placeholder="Invite Someone">
        <button type="submit" name="submit" value="submit">Submit</button>
      </form>
    </header>
		
    <div class="main">	
      <h2>Invitees</h2>
      <ul id="invitedList"></ul>	
    </div>
  </div>
  <script type="text/javascript" src="app.js"></script>
</body>

相关问题
最新问题