I've got a function to select all checkboxes in a table:

<script type="text/javascript">
        function checkAll() {
            var tab = document.getElementById("logs");
            var elems = tab.getElementsByTagName("input");
            var len = elems.length;

            for (var i = 0; i < len; i++) {
                if (elems[i].type == "checkbox") {
                    elems[i].checked = true;
                }
            }
        }

But I can't get it to uncheck them all if they are checked. How could I do that?

<th width='2%'><a href="#" onclick="checkAll();">Mark</a></th>";

Also in javascript is it possible to rename "Mark" to "Un-Mark" if I execute checkAll()?

I've got a function to select all checkboxes in a table:

<script type="text/javascript">
        function checkAll() {
            var tab = document.getElementById("logs");
            var elems = tab.getElementsByTagName("input");
            var len = elems.length;

            for (var i = 0; i < len; i++) {
                if (elems[i].type == "checkbox") {
                    elems[i].checked = true;
                }
            }
        }

But I can't get it to uncheck them all if they are checked. How could I do that?

<th width='2%'><a href="#" onclick="checkAll();">Mark</a></th>";

Also in javascript is it possible to rename "Mark" to "Un-Mark" if I execute checkAll()?

• javascript
• html

Share Improve this question Follow asked Mar 30, 2011 at 16:21 KyleKyle 3,0381919 gold badges5353 silver badges7979 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

This should do both of the things u want:

function checkAll(obj) {
        var tab = document.getElementById("logs");
        var elems = tab.getElementsByTagName("input");
        var len = elems.length;

        for (var i = 0; i < len; i++) {
            if (elems[i].type == "checkbox") {
                if(elems[i].checked == true){
                    elems[i].checked = false;
                }
                else{
                    elems[i].checked = true;
                }
            }
        }

        if(obj.innerHTML == 'Mark') { obj.innerHTML = 'Unmark' }
        else { obj.innerHTML = 'Mark' }
    }

html:

<th width='2%'><a href="#" onclick="checkAll(this);">Mark</a></th>";

1) why don't u use some js framework, like jQuery?

2) to remove checked, use elems[i].removeAttribute('checked') or set elems[i].checked = false;

3) to rename, you have to set it's innerHTML or innerText to Un-Mark

Add a little more logic to see if they're already checked. This will invert their current checked state.

for (var i = 0; i < len; i++) {
   if (elems[i].type == "checkbox") {
     if (!elems[i].checked) {
       elems[i].checked = true;
     }
     else elems[i].checked = false;
   }
}

If you just want to uncheck all, simply use:

elems[i].checked = false;

This will check them all regardless of their current state, or uncheck them all, depending on the current text of "Mark" or "Unmark".

    <script type="text/javascript">
    function checkAll(obj) {
        var tab = document.getElementById("logs");
        var elems = tab.getElementsByTagName("input");
        var len = elems.length;
        var state = obj.innerHTML == 'Mark';
        for (var i = 0; i < len; i++) {
            if (elems[i].type == "checkbox") {
                elems[i].checked = state;
            }
        }
        obj.innerHTML = state ? 'Mark' : 'Unmark';
    }

And then the HTML changes to:

<th width='2%'><a href="#" onclick="checkAll(this);">Mark</a></th>";

To uncheck, try:

elems[i].checked = false;

i sugest you use jquery, everything is easier.

with jquery you just have to do something like this (+/-):

$(function(){

    $('a.ClassName').click(function(){
      var oTbl = $('#tableID');
      $('input[type="checkbox"]', oTbl).attr("checked", "checked")
    });

})