Selects none and select all checkboxes

Hi all,

I have some checkboxes on a page that by default I have checked when the page loads. I would like to add a "Select None" and "Select All" buttons to the bottom of the pages so the user can quickly deselect and select all the options:

Here's the format I currently have them in :


<li class="list">
      <img src="images/hak.jpg" height="100" width="120" />
      <label class="filter">Hak
      <input type="checkbox" name="checkbox1" value="2" checked/>
      </label>
 	  </li>  
      <li class="list">
      <img src="images/ges.jpg" height="100" width="120" style="" />
      <label class="filter">Ges
      <input type="checkbox" name="checkbox2" value="4" checked/>
      </label>
      </li>

Open in new window

TLN_CANADAAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
Test page : http://jsfiddle.net/5dxra/
using :
<input type="checkbox" checked="checked" id="checky" /><label for="checky" id="forchecky">Uncheck all</label>

Open in new window

and :
window.onload = function() {
    document.getElementById("checky").onchange = function() {
        setAllCheckboxes(this.checked);
        document.getElementById("forchecky").innerHTML = this.checked?"Uncheck all":"Check all";
    }
}
function setAllCheckboxes(state) {
    var inputs = document.getElementsByTagName("input");
    for(var i=0;i<inputs.length;i++)  if(inputs[i].name && /checkbox\d/.test(inputs[i].name)) inputs[i].checked = state;
}

Open in new window

0
 
TLN_CANADAAuthor Commented:
Works perfectly! Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.