[RESOLVED] Using Javascript to check and uncheck boxes

This site is best viewed in a modern browser with JavaScript enabled.

[RESOLVED] Using Javascript to check and uncheck boxes

mrjane

Hello, I've got another assignment for javascript class that I'm struggling with. Here's the code:

//the check mark boxes
<div id="myboxes">
<p>What do you love?</p>
<p><input name="chocoCake" type="checkbox" value="chocolate cake" /><label for="chocoCake">Chocolate Cake</label></p>

<p><input name="baseball" type="checkbox" value="baseball" /><label for="baseball">Baseball</label></p>

<p><input name="shinyThings" type="checkbox" value="Shiny Things" /><label for="shinyThings">Shiny Things</label></p>

<p><input name="puppies" type="checkbox" value="puppies" /><label for="puppies">Puppies</label></p>

<p><input name="vacation" type="checkbox" value="Vacation" /><label for="vacation"> Vacation</label></p>

<p><input type="button" value="Check All" onclick="checkAll()" /></p>

<p><input type="button" value="Uncheck All" onclick="unCheckAll()" /></p>
</div>

//the javascript
function checkAll() {
     var checkboxes = new Array();
     checkboxes = document.getElementsByTagName('input');

 for (var i = 0; i < checkboxes.length; i++) {
     if (checkboxes[i].type == 'checkbox') {
         checkboxes[i].setAttribute('checked', true)
     }
 }
 }

 function unCheckAll() {
     var uncheckboxes = new Array();
     uncheckboxes = document.getElementsByTagName('input');

 for (var i = 0; i < uncheckboxes.length; i++) {
     if (uncheckboxes[i].type == 'checkbox') {
         uncheckboxes[i].setAttribute('unchecked', false)
     }
 }
 }

As it stands, the first "Check All" box works great. But, when I use the "Uncheck All" button, nothing happens. What am I missing?

ShrineDesigns

uncheckboxes[i].setAttribute('unchecked', false)

change 'unchecked' to 'checked'. alternatively, you can use the checked property instead calling setAttribute(). example:

var boxes = document.getElementsByTagName('input');

for(var i = 0, len = boxes.length; i < len; ++i){
    if(boxes[i].type == 'checkbox')
        boxes[i].checked = true;
}

mrjane

Thanks for the suggestions. But, the first suggestion, changed 'unchecked to 'checked' did nothing. The second suggestion, the code .checked worked... but then to try to recheck them with the first button again doesn't work. So, I can check all, then uncheck all, but then I can't check all again. Anyone know why?

ShrineDesigns

oh yea i forgot... when you use setAttribute() the value argument must be a string.

obj.setAttribute('checked', 'true');

this works

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function applyAll(s){
	var obj = document.getElementsByTagName('input');

if(!obj)
	return;
for(var i = 0, l = obj.length; i < l; ++i){
	if(obj[i].type == 'checkbox')
		obj[i].checked = !!s;
}
}
function checkAll(){
	applyAll(true);
}
function unCheckAll(){
	applyAll(false);
}
</script>
</head>
<body>
<div id="myboxes">
  <p>What do you love?</p>
  <p><label><input name="chocoCake" type="checkbox" value="chocolate cake" /> Chocolate Cake</label></p>
  <p><label><input name="baseball" type="checkbox" value="baseball" /> Baseball</label></p>
  <p><label><input name="shinyThings" type="checkbox" value="Shiny Things" /> Shiny Things</label></p>
  <p><label><input name="puppies" type="checkbox" value="puppies" /> Puppies</label></p>
  <p><label><input name="vacation" type="checkbox" value="Vacation" /> Vacation</label></p>
  <p><input type="button" value="Check All" onclick="checkAll()" /></p>
  <p><input type="button" value="Uncheck All" onclick="unCheckAll()" /></p>
</div>
</body>
</html>

you can avoid need for using the "for" attribute for labels if you "wrap" the form element in the label.

mrjane

This works fantastic! Thank you. I was just wondering, what this line does:

obj[i].checked = !!s;

I think the !! means NOT NOT, right? As in to switch the result? But why the "s"?

Sup3rkirby

In the context of ShrineDesigns' code, 's' is an argument being passed into the function (that would be either true or false).

As for the double exclamation, it's basically a clever way of converting a value into a boolean value. You are essentially correct in saying it means 'NOT NOT' and that the value would then be 's'. When you apply a single exclamation mark to a variable it because 'NOT' and also becomes a boolean value. However it's inverted. So the second exclamation inverts it a second time, more or less giving you an 'IS' operator, but forcing the value to actually be a boolean value.

mrjane

Thanks for the explanation, that really helped!