www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Using Javascript to check and uncheck boxes

  1. #1
    Join Date
    Apr 2014
    Posts
    44

    resolved [RESOLVED] Using Javascript to check and uncheck boxes

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

    PHP 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 
    0checkboxes.lengthi++) {
             if (
    checkboxes[i].type == 'checkbox') {
                 
    checkboxes[i].setAttribute('checked'true)
             }
         }
     }
     
     function 
    unCheckAll() {
         var 
    uncheckboxes = new Array();
         
    uncheckboxes document.getElementsByTagName('input');

         for (var 
    0uncheckboxes.lengthi++) {
             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?

  2. #2
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    Code:
    uncheckboxes[i].setAttribute('unchecked', false)
    change 'unchecked' to 'checked'. alternatively, you can use the checked property instead calling setAttribute(). example:
    Code:
    var boxes = document.getElementsByTagName('input');
    
    for(var i = 0, len = boxes.length; i < len; ++i){
        if(boxes[i].type == 'checkbox')
            boxes[i].checked = true;
    }

  3. #3
    Join Date
    Apr 2014
    Posts
    44
    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?

  4. #4
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    oh yea i forgot... when you use setAttribute() the value argument must be a string.
    Code:
    obj.setAttribute('checked', 'true');
    this works
    Code:
    <!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.

  5. #5
    Join Date
    Apr 2014
    Posts
    44
    This works fantastic! Thank you. I was just wondering, what this line does:

    PHP Code:
    obj[i].checked = !!s
    I think the !! means NOT NOT, right? As in to switch the result? But why the "s"?

  6. #6
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    955
    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.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  7. #7
    Join Date
    Apr 2014
    Posts
    44
    Thanks for the explanation, that really helped!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles