<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选 取消全选 删除 替换 练习</title>
</head>
<body>
<button type="button" id="btn1">全选</button>
<button type="button" id="btn2">取消全选</button>
<button type="button" id="btn3">删除</button>
<button type="button" id="btn4">替换</button>
<p><input type="checkbox" name="" id="" value="" /><font>屋顶</font></p>
<p><input type="checkbox" name="" id="" value="" /><font>布拉格广场</font></p>
<p><input type="checkbox" name="" id="" value="" /><font>鬼迷心窍</font></p>
<p><input type="checkbox" name="" id="" value="" /><font>爱的代价</font></p>
<p><input type="checkbox" name="" id="" value="" /><font>当爱已成往事</font></p>
<p><input type="checkbox" name="" id="" value="" /><font>山丘</font></p>
<p><input type="checkbox" name="" id="" value="" /><font>凡人歌</font></p>
<p><input type="checkbox" name="" id="" value="" /><font>我是真的爱你</font></p>
<p><input type="checkbox" name="" id="" value="" /><font>飘洋过海来看你</font></p>
<p><input type="checkbox" name="" id="" value="" /><font>她来听我的演唱会</font></p>
<script>
<!--全选功能-->
var ipts = document.getElementsByTagName("input");
document.getElementById("btn1").onclick = function (){
for (var i = 0; i < ipts.length; i++) {
ipts[i].checked ="checked";
}
}
<!--取消全选功能-->
document.getElementById("btn2").onclick = function (){
for (var i = 0; i < ipts.length; i++) {
ipts[i].checked ="";
}
}
<!--删除功能-->
document.getElementById("btn3").onclick = function(){
for (var i = 0 ; i < ipts.length; i++) {
if(ipts[i].checked){
ipts[i].parentNode.remove();
}
}
}
<!--替换功能-->
document.getElementById("btn4").onclick = function() {
var ipts = document.getElementsByTagName("input");
var p = document.getElementById("p");
for (var i = 0; i < ipts.length; i++) {
if (ipts[i].checked) {
ipts[i].parentNode.lastChild.innerHTML ="晴天";
}
}
}
</script>
</body>
</html>
因为你循环是一个一个删的，当你删除下标为0的元素时，后面的元素就顶替了0的下标，当循环第二次的时候删的下标为1其实是之前为2的。
document.getElementById("btn3").onclick = function(){
for (var i = ipts.length-1 ; i >= 0; i--) {
console.log(ipts)
if(ipts[i].checked){
ipts[i].parentNode.remove();
}
}
}
在不影响你原功能上，我建议倒着删除
document.getElementById("btn3").onclick = function(){
for (var i = ipts.length-1 ; i >= 0; i--) {
if(ipts[i].checked){
ipts[i].parentNode.remove();
}
}
}
在不影响你原功能上，我建议倒着删除
在删除时数组会发生变化，在for循环中，当你删除掉第1个元素以后，原本的第二个元素会因为第一个元素不存在，变成第一个元素，但是这时候for循环里的第一次循环已经执行完了，开始执行第二次，那么自动晋升到第一位的原本是第二位的元素就永远不会被删除，删除的是第三个元素。同理，一次类推，所以应该倒叙删除，这样不存在数组改变后元素自动晋升到前一位这样的状况。