Question

＆＃13;

var getCheckBox = document.getElementsByClassName('checkbox');
var i = 0;
function selectAll(SelectAllCheckBox){
	if (SelectAllCheckBox.checked) {
		while (i < getCheckBox.length){
			getCheckBox[i].checked = true;
			 i++
		}
	}
	else{ 
		while(i < getCheckBox.length){
			getCheckBox[i].checked = false;
			i++
		}
	}
}

＆＃13;

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Select All Checks</title>
    </head>
    <body>
    	<label><input type="checkbox" onchange="selectAll(this)">Select All</label><br><br>
    	<div>
    		<label><input type="checkbox" class="checkbox">checkbox 1</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 2</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 3</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 4</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 5</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 6</label><br>
    	</div>

</body>
</html>

＆＃13;

Hello Guys，我发现上面的代码选中了所有复选框，并选择了代码正常工作的所有复选框，但是当我取消选中所有复选框时代码停止工作并且它在控制台中没有显示任何错误

请帮帮我

Answer 1

您应该使用i作为局部变量而不是全局变量，因为根据您的函数，您需要每次使用i值定义0。

var getCheckBox = document.getElementsByClassName('checkbox');
function selectAll(SelectAllCheckBox) {
  var i = 0;
  if (SelectAllCheckBox.checked) {
    while (i < getCheckBox.length) {
      getCheckBox[i].checked = true;
      i++
    }
  } else {
    while (i < getCheckBox.length) {
      getCheckBox[i].checked = false;
      i++
    }
  }
}

<label><input type="checkbox" onchange="selectAll(this)">Select All</label><br><br>
<div>
  <label><input type="checkbox" class="checkbox">checkbox 1</label><br>
  <label><input type="checkbox" class="checkbox">checkbox 2</label><br>
  <label><input type="checkbox" class="checkbox">checkbox 3</label><br>
  <label><input type="checkbox" class="checkbox">checkbox 4</label><br>
  <label><input type="checkbox" class="checkbox">checkbox 5</label><br>
  <label><input type="checkbox" class="checkbox">checkbox 6</label><br>
</div>

Answer 2

将var i = 0;放在您的函数中而不是全局级

请参阅以下代码段以供参考

＆＃13;

var getCheckBox = document.getElementsByClassName('checkbox');

function selectAll(SelectAllCheckBox){
var i = 0;
debugger;
	if (SelectAllCheckBox.checked) {
		while (i < getCheckBox.length){
			getCheckBox[i].checked = true;
			 i++
		}
	}
	else{ 
		while(i < getCheckBox.length){
			getCheckBox[i].checked = false;
			i++
		}
	}
}

＆＃13;

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Select All Checks</title>
    </head>
    <body>
    	<label><input type="checkbox" onchange="selectAll(this)">Select All</label><br><br>
    	<div>
    		<label><input type="checkbox" class="checkbox">checkbox 1</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 2</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 3</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 4</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 5</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 6</label><br>
    	</div>

</body>
</html>

＆＃13;

Answer 3

每次调用该函数时，您需要重置i = 0。

var getCheckBox = document.getElementsByClassName('checkbox');

function selectAll(SelectAllCheckBox){
	if (SelectAllCheckBox.checked) {
		for (i=0; i < getCheckBox.length; i++){
			getCheckBox[i].checked = true;
		}
	}
	else{ 
		for (i=0; i < getCheckBox.length; i++){
			getCheckBox[i].checked = false;

		}
	}
}

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Select All Checks</title>
    </head>
    <body>
    	<label><input type="checkbox" onchange="selectAll(this)">Select All</label><br><br>
    	<div>
    		<label><input type="checkbox" class="checkbox">checkbox 1</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 2</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 3</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 4</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 5</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 6</label><br>
    	</div>

</body>
</html>

Answer 4

通过jquery

执行此操作的最简单方法

$("#all").change(function() {
    if(this.checked) {
        $(".checkbox").attr('checked', true)
    }
    else {
         $(".checkbox").attr('checked', false)
         }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Select All Checks</title>
    </head>
    <body>
    	<label><input type="checkbox" id="all">Select All</label><br><br>
    	<div>
    		<label><input type="checkbox" class="checkbox">checkbox 1</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 2</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 3</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 4</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 5</label><br>
    		<label><input type="checkbox" class="checkbox">checkbox 6</label><br>
    	</div>

</body>
</html>

Answer 5

我认为我们可以稍微简化一下这个逻辑。看看这个：

function selectAll(SelectAllCheckBox) {
    const checkBoxes = document.getElementsByClassName('checkbox');

    checkBoxes.forEach((checkbox) => {
        checkbox.checked = !!SelectAllCheckBox.checked;
    });
}

这就是全部;）

看看这一刻：

!!SelectAllCheckBox.checked

我们需要双倍“！”使SelectAllCheckBox.checked的布尔值。例如，如果SelectAllCheckBox.checked === undefined

!!SelectAllCheckBox.checked

将返回false，因此代码永远不会破坏。但是如果你确定，那个被检查的属性总是真或假 - 只需删除double“！”在SelectAllCheckBox.checked之前

选择所有不取消选中所有复选框

5 个答案:

通过jquery