时间戳

首页 > 解决方案 > 如何在 for 循环中使用带有 OR 的 if 语句

javascript - 如何在 for 循环中使用带有 OR 的 if 语句

问题描述

我希望当用户单击转到下一页或上一页时，if 语句会检查所有复选框，无论它们是否被勾选，并且只有在所有复选框都被勾选时才显示警报（“yay”）消息，我正在努力使用 if 语句在for循环迭代中使用OR，我只勾选复选框1，它显示我不希望我需要它先检查所有复选框的警报（“yay”）消息，然后显示警报（“yay”）消息，谢谢

/* This function basically gets the element id name for each checkbox*/
function getText(j){
	var j = document.getElementById("text"+j).name;
	return j;	
}

/* This function basically gets the element id of each checkbox thats passed into y
 as a number and returns either that checkbox is true or false*/
function getBoolean(y){
	var y = document.getElementById("text"+y).checked;
	return y;	
}

/* This function basically counts how many Li elements excluding the second level Li elements*/
function getLengthLi(){
	var e = document.querySelectorAll('#list > li').length;
	return e;
}


function checkTicks(){
    for(i = 1;i < getLengthLi()+1;i++){
        console.log(getText([i])+"="+getBoolean([i]));
		if (!getBoolean([i]) ){
			alert("Please read and check all boxes");
			break;
		}else 
			alert("yay you read each point and ticked all boxes");
			break;
    }
}
body{
	background-image: linear-gradient(#66ff33, yellow);
}

#footer{
	font-weight: bold;
	font-size:36px;
	border: 2px solid black;
	background-image: linear-gradient(#ccdae6, #eaead5);
}



a{
	border: 2px solid black;
	text-decoration:none;
	font-size:36px;
	background-color:orange;
}

a:hover{
	background-color:black;
	//background-color:#ccdae6;
}

h1{
	border: 2px solid black;
	background-image: linear-gradient(#ccdae6, #eaead5);
}

h2{
	border: 2px solid black;
	background-image: linear-gradient(#ccdae6, #eaead5);
}

#menu{
	border: 2px solid black;
	line-height: 1.6;
    top:0;
    left:0;
    overflow-wrap: break-word;
    float:left;
  word-wrap: break-word;
  hyphens: auto;
  height:auto;
}

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=page-width, initial-scale=1.0">
   <title>Simple item checkbox</title>
   <link rel="stylesheet" href="textpages.css" />
   <script src="page6.js"></script>

</head>
<body>
<center>
<div id="menu">
	<h1>Page 6</h1>
	<h2>Please tick all checkboxes to proceed to the next page<h2>
	
	<ol id="list">
		<input type="checkbox" name="text1" id="text1"><li>list1</li>
		<input type="checkbox" name="text2" id="text2"><li>list2</li>
		<input type="checkbox" name="text3" id="text3"><li>list3</li>
		<input type="checkbox" name="text4" id="text4"><li>list4</li>
		<input type="checkbox" name="text5" id="text5"><li>list5</li>
		<input type="checkbox" name="text6" id="text6"><li>list6</li>
		<input type="checkbox" name="text7" id="text7"><li>list7</li>
		<input type="checkbox" name="text8" id="text8"><li>list8</li>
	</ol>

	
	
	
	
</div>
<a onclick="checkTicks()">Previous Page</a>
<a onclick="checkTicks()">Next Page</a>

标签： javascripthtmlfor-loopif-statementnested

解决方案

您应该尝试使用 While 循环：

function checkTicks(){
    bool check = 1;
    int i = 1;
    while(check==1 && i< getLengthLi()+1){
    console.log(getText([i])+"="+getBoolean([i]));
    if (!getBoolean([i]))check = 0;
        i++;
   }
   if(!check) alert("Please read and check all boxes"); 
   else alert("yay you read each point and ticked all boxes");
}

推荐阅读