I want when the user clicks to goto the next page or previous page that an if statement checks all checkboxes whether they are ticked or not and only if all is ticked then show the alert("yay") message im struggling to use an if statement with the OR inside a for loop iteration whereby i tick checkbox 1 only and it displays the alert("yay") message which i dont want i need it to check all checkboxes first then display the alert("yay") message,thank you
/* 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>
Aucun commentaire:
Enregistrer un commentaire