CODEWITHSUNDEEP
javascript
Luk
Luk

Reputation: 55

How to selectall or unselect all elements

I made a select all box successfully, but I have another question.

How do I make it unselected too?

Here is my javascript code:

var tab1 = document.getElementById("tbl1"); 
var tab2 = document.getElementById("tbl2");
var tab3 = document.getElementById("tbl3");
var tab4 = document.getElementById("tbl4");
var tab5 = document.getElementById("tbl5");
var tab6 = document.getElementById("tbl6");
var tab7 = document.getElementById("tbl7");
var tab8 = document.getElementById("tbl8");
var tab9 = document.getElementById("tbl9");
var elems = document.getElementById("checkall");


if (elems.checked == true) {

    tab1.checked = true;
    tab2.checked = true;
    tab3.checked = true;
    tab4.checked = true;
    tab5.checked = true;
    tab6.checked = true;
    tab7.checked = true;
    tab8.checked = true;
    tab9.checked = true;
}

Is there any way to do this?

Upvotes: 1

Views: 203

Answers (4)

Xiaodan Mao
Xiaodan Mao

Reputation: 1706

var checkAll = elems.checked;
tab1.checked = checkAll;
tab2.checked = checkAll;
tab3.checked = checkAll;
tab4.checked = checkAll;
tab5.checked = checkAll;
tab6.checked = checkAll;
tab7.checked = checkAll;
tab8.checked = checkAll;
tab9.checked = checkAll;

Or you can give a name to these checkboxes, document.getElementsByName will return the collection of elements which contain tab1 to tab9. Then you can use a for loop to assign the property.
Hope it's helpful.

Upvotes: 0

Mohan Raj
Mohan Raj

Reputation: 457

Use jQuery to make this as more simple

<input type="checkbox" id="check_all" onclick='check_uncheck();'/>
    <input type="checkbox" name="tab[]" id="tbl1" />
    <input type="checkbox" name="tab[]" id="tbl2" />
    <script>
    function check_uncheck() {
        jQuery("[name='tab[]']").prop('checked', $('#check_all').prop('checked'));
    }
    </script>

Upvotes: 0

undone
undone

Reputation: 7888

 <input type="checkbox"  id="tbl1" /><br />
 <input type="checkbox"  id="tbl2" /><br />
 <input type="checkbox"  id="tbl3" /><br />
 <input type="checkbox"  id="tbl4" /><br />
 <input type="checkbox"  id="tbl5" /><br />
 <input type="checkbox"  id="tbl6" /><br />
 <input type="checkbox"  id="tbl7" /><br />
 <input type="checkbox"  id="tbl8" /><br />
 <input type="checkbox"  id="tbl9" /><br />
 <input type="checkbox"  id="checkall"  onclick="selectDeselect();"    />


 <script>
        function selectDeselect(){
            var elems = document.getElementById("checkall");
            for(var i = 1;i<=9;i++){
                tab = document.getElementById("tbl" + i);
                tab.checked = elems.checked;
            }

        }
</script>

Upvotes: 0

Akhil Sekharan
Akhil Sekharan

Reputation: 12693

Give a common class name for your child checkboxes, for example child-selector:

var checked = document.getElementById("checkall").checked;
var childElems = document.getElementsByClassName('child-selector');

for(var i=0; i< childElems.length; i++){
    childElems[i].checked = checked;
}

Upvotes: 4

Related Questions