How to add the border of the div that currently checked checkbox is in. As a base I used code from an online course that actually went through very similar function. Unfortunately, after the changes, it is not working.
The HTML
<div id="checkbox">
<label>
<input id="highlightall" type="checkbox"> Check all
</label>
</div>
<div class="checkboxall">
<div class="box">
<label>
<input class="highlight" type="checkbox"> Checkbox1
</label>
</div>
<div class="box">
<label>
<input class="highlight" type="checkbox"> Checkbox2
</label>
</div>
<div class="box">
<label>
<input class="highlight" type="checkbox"> Checkbox3
</label>
</div>
</div>
And Javascript file
function preparePage() {
document.getElementsByClassName("highlight").onclick = function() {
if (document.getElementsByClassName("highlight").checked) {
// use CSS style to show it
document.getElementsByClassName("box").style.border = "thick solid #0000FF";
} else {
// hide the div
document.getElementsByClassName("box").style.border = "none";
}
};
// now hide it on the initial page load.
document.getElementsByClassName("box").style.border = "none";
}
window.onload = function() {
preparePage();
};
Also, here is the jsfiddle link: https://jsfiddle.net/ohth2n7e/1/
Thank you for your time!
Working all. Check all. and single click
document.getElementById('highlightall').onclick = function(){ var border = document.getElementsByClassName("highlight"); for(i=0;i < border.length; i++) { border[i].checked = (this.checked)? true : false; } } var border = document.getElementsByClassName("highlight"); for(i=0;i < border.length; i++) { border[i].addEventListener("click", function() { if (this.checked) { this.parentElement.style.border = "thick solid #0000FF"; } else { this.parentElement.style.border = "none"; } }); }
.checkboxall { background:#222; padding:10px; color:#fff; }
<div id="checkbox"> <label> <input id="highlightall" type="checkbox"> Check all </label> </div> <div class="checkboxall"> <div class="checkbox"> <label> <input class="highlight" type="checkbox"> Checkbox1 </label> </div> <div class="checkbox"> <label> <input class="highlight" type="checkbox"> Checkbox2 </label> </div> <div class="checkbox"> <label> <input class="highlight" type="checkbox"> Checkbox3 </label> </div> </div>
document.getElementsByClassName
returns a NodeList
and you need to bind click event
handler for each one.
For setting checkbox border
you need to use outlineColor
and outlineStyle
properties.
For binding event
handlers you have to use a for
loop and attach a event handler for each checkbox
DOM element.
var checkboxes=document.getElementsByClassName("highlight"); for(var i=0;i<checkboxes.length;i++){ checkboxes[i].onclick=function(){ console.log("Current index: "+i); if (checkboxes[i].checked) { checkboxes[i].style.outlineColor = "red"; checkboxes[i].style.outlineStyle = "solid"; } else { checkboxes[i].style.outlineColor = "none"; checkboxes[i].style.outlineStyle = "none"; } }; }
.checkboxall { background:#222; padding:10px; color:#fff;}
<div id="checkbox"> <label> <input id="highlightall" type="checkbox"> Check all </label> </div> <div class="checkboxall"> <div class="checkbox"> <label> <input class="highlight" type="checkbox"> Checkbox1 </label> </div> <div class="checkbox"> <label> <input class="highlight" type="checkbox"> Checkbox2 </label> </div> <div class="checkbox"> <label> <input class="highlight" type="checkbox"> Checkbox3 </label> </div> </div>
But if you look, it appears errors
. That's because when page loads
, the preparePage
is invoked and it created a context
. When you click a checkbox
element, the last value saved
for i
variable will be 3
(like in the above snippet).
Why this behaviour?
Because there was only one scope within the preparePage()
function, the i
variable is only bound to a value within that scope. In other words, each time the loop changes the value of i
, it changes it for everything that references it within that scope.
After the loop finished the i
variable has value 3.
That was being said, one solution is to use let
keyword.
var checkboxes=document.getElementsByClassName("highlight"); for(let i=0;i<checkboxes.length;i++){ checkboxes[i].onclick=function(){ if (checkboxes[i].checked) { checkboxes[i].style.outlineColor = "red"; checkboxes[i].style.outlineStyle = "solid"; } else { checkboxes[i].style.outlineColor = "none"; checkboxes[i].style.outlineStyle = "none"; } }; }
.checkboxall { background:#222; padding:10px; color:#fff;}
<div id="checkbox"> <label> <input id="highlightall" type="checkbox"> Check all </label> </div> <div class="checkboxall"> <div class="checkbox"> <label> <input class="highlight" type="checkbox"> Checkbox1 </label> </div> <div class="checkbox"> <label> <input class="highlight" type="checkbox"> Checkbox2 </label> </div> <div class="checkbox"> <label> <input class="highlight" type="checkbox"> Checkbox3 </label> </div> </div>
Another way is to use Immediately-invoked function expression .
For closures
, please have a look here .
var checkboxes=document.getElementsByClassName("highlight"); for(var i=0;i<checkboxes.length;i++){ (function(index){ checkboxes[index].onclick=function(){ if (checkboxes[index].checked) { checkboxes[index].style.outlineColor = "red"; checkboxes[index].style.outlineStyle = "solid"; } else { checkboxes[index].style.outlineColor = "none"; checkboxes[index].style.outlineStyle = "none"; } }; }(i)); }
.checkboxall { background:#222; padding:10px; color:#fff;}
<div id="checkbox"> <label> <input id="highlightall" type="checkbox"> Check all </label> </div> <div class="checkboxall"> <div class="checkbox"> <label> <input class="highlight" type="checkbox"> Checkbox1 </label> </div> <div class="checkbox"> <label> <input class="highlight" type="checkbox"> Checkbox2 </label> </div> <div class="checkbox"> <label> <input class="highlight" type="checkbox"> Checkbox3 </label> </div> </div>
Note : document.getElementsByClassName refers group of elements
Other than document.getElementsByClassName("highlight") you can use document.getElementById("highlightall")
change your Javascript File as below
function preparePage() {
document.getElementById("highlightall").onclick = function() {
if (document.getElementById("highlightall").checked) {
// use CSS style to show it
document.getElementsByClassName("checkbox")[0].style.border = "thick solid #FFFFFF";
} else {
// hide the div
document.getElementsByClassName("checkbox")[0].style.border = "none";
}
}
// now hide it on the initial page load.
document.getElementsByClassName("checkbox")[0].style.border = "none";
}
window.onload = function() {
preparePage();
};
I think this may help you
Thanks
I have done the following method inside my Code and it help me.
On Selecting a checkbox, I have predefined a class selector name responded
and when the checkbox is checked, its get dynamically added to the checkbox and I have added a change
listener as it listen to our DOM Change and manipulate it.
As a result a beautiful border is displayed around checkbox.
const form = document.getElementById('registrar'); const input = form.querySelector('input'); const ul = document.getElementById('invitedList'); form.addEventListener('submit', (e) => { e.preventDefault(); const text = input.value; input.value = ''; const li = document.createElement('li'); li.textContent = text; const label = document.createElement('label'); label.textContent = 'Confirmed'; const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; label.appendChild(checkbox); li.appendChild(label); ul.appendChild(li); }); ul.addEventListener('change', (e) => { const checkbox = event.target; const checked = checkbox.checked; const listItem = checkbox.parentNode.parentNode; if (checked) { listItem.className = 'responded'; } else { listItem.className = ''; } });
/* responded */ .responded { transition: 0.4s; border-color: rgba(88, 183, 205, .9); } .responded label { transition: 0.4s; color: rgba(88, 183, 205, 1); }
<body> <div class="wrapper"> <header> <h1>RSVP</h1> <p>A Demo App</p> <form id="registrar"> <input type="text" name="name" placeholder="Invite Someone"> <button type="submit" name="submit" value="submit">Submit</button> </form> </header> <div class="main"> <h2>Invitees</h2> <ul id="invitedList"></ul> </div> </div> <script type="text/javascript" src="app.js"></script> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.