I want to get a warning message when no checkboxes is checked. Actually following code works, but it has small error. At the beginning two of the checkboxes are checked as default, so I should get any warning, but I am getting warning message. However, when I uncheck one of the checkboxes warning disappear. I couldn't understand what is the reason that I am getting this warning at the beginning even if checkboxes are checked. Do you have any suggestion about how to fix?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="checkbox" name = "group4" id="cb10" value="op1" onchange="storeSelection()">
<label for="cb11">Option 1</label>
<input type="checkbox" name = "group4" id="cb9" value="op2" onchange="storeSelection()">
<label for="cb11">Option 2</label>
<p></p>
<div id="warningDiv"></div>
<a class="btn primary" href="new2.html" onclick="storeSelection()">Next</a>
</body>
</html>
<script>
window.addEventListener("DOMContentLoaded", (event) => {
checked = JSON.parse(localStorage.getItem("cb"));
if(!checked || checked.length == 0) {
const checkboxes = document.querySelectorAll("input[name=group4]");
for (let i = 0; i < checkboxes.length; i++) {
document.getElementById(checkboxes[i].id).checked = true;
}
}
checked.map((id) => {
document.getElementById(id).checked = true;
});
});
function storeSelection() {
var array = [];
var array2 = [];
const checkboxes = document.querySelectorAll("input[name=group4]:checked");
for (let i = 0; i < checkboxes.length; i++) {
array.push(checkboxes[i].id);
array2.push(checkboxes[i].value);
}
localStorage.setItem("cb", JSON.stringify(array));
localStorage.setItem("cbfinal", JSON.stringify(array2));
unChecked = document.querySelectorAll("input[name=group4]:not(:checked)");
checked = JSON.parse(localStorage.getItem("cb"));
for (let i = 0; i < unChecked.length; i++) {
if (checked.includes(unChecked[i].value) == true) {
unChecked[i].checked = true;
}
}
}
</script>
<script>
function checkChecked()
{
if(document.querySelectorAll('input[name=group4]:checked').length == 0)
{
document.getElementById('warningDiv').innerHTML = "WARNING: Please select provider to proceed further!";
}
else{
document.getElementById('warningDiv').innerHTML = "";
}
}
checkChecked();
const allcheckboxes = document.querySelectorAll('input[name=group4]');
for(let checkboxinput in allcheckboxes)
{
if(typeof allcheckboxes[checkboxinput] == "object" && allcheckboxes[checkboxinput] != null)
{
allcheckboxes[checkboxinput].addEventListener('change', function(e) {
checkChecked()
});
}
}
</script>
Aucun commentaire:
Enregistrer un commentaire