Question

88

Javascript check / uncheck checkboxes based on id

rated 0 times [ 90] [ 2] / answers: 1 / hits: 52877 / 11 Years ago, mon, july 29, 2013, 12:00:00

I have many server input checkboxes. I have given the first checkbox the id all. By default it will be checked. When the user checks other checkboxes, then checkbox with id all will be unchecked. And if all is checked other checkboxes will be unchecked. For this to happen i made the code but nothing is happening.

Here is what i have tried.

<form>

<input type=checkbox id=all value=all name=all onChange=check() checked/>ALL <br/>

<input type=checkbox id=servers value=xampp name=server[] onChange=check() />XAMPP <br/>

<input type=checkbox id=servers value=wamp name=server[] onChange=check() />WAMP <br/>

<input type=checkbox id=servers value=mamp name=server[] onChange=check() />MAMP <br/>

<input type=checkbox id=servers value=amp name=server[] onChange=check() />AMP <br/>

</form>





function check(){

    var all = document.getElementById(all),

        group = document.getElementById(servers);

    if(all.checked == true){

        group.checked == false;

    }elseif(group.checked == true){

        all.checked == false;

    }

}

I wanted my code to work like THIS.

I dont want to use jQuery for some reasons. So i need my code to be in pure JS.

Any help will be appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

braidenv

Add To Favorites

Follow

Total Points: 80

Total Questions: 104

Total Answers: 91

Location: Peru

Member since Fri, Oct 14, 2022

2 Years ago

answered 11 Years ago leog · Accepted Answer

You can't use the same ID on multiple elements.

Try this, notice how I placed the checkboxes in a div

Here it is working: http://jsfiddle.net/Sa2d3/

HTML:

<form>

    <div id=checkboxes>

        <input type=checkbox id=all value=all name=all onChange=check() />ALL <br/>

        <input type=checkbox value=xampp name=server[] onChange=check() />XAMPP <br/>

        <input type=checkbox value=wamp name=server[] onChange=check() />WAMP <br/>

        <input type=checkbox value=mamp name=server[] onChange=check() />MAMP <br/>

        <input type=checkbox value=amp name=server[] onChange=check() />AMP <br/>

    </div>

</form>

JavaScript:

document.getElementById('checkboxes').addEventListener('change', function(e) {

    var el = e.target;

    var inputs = document.getElementById('checkboxes').getElementsByTagName('input');



    // If 'all' was clicked

    if (el.id === 'all') {



        // loop through all the inputs, skipping the first one

        for (var i = 1, input; input = inputs[i++]; ) {



            // Set each input's value to 'all'.

            input.checked = el.checked;

        }

    }



    // We need to check if all checkboxes have been checked

    else {

        var numChecked = 0;



        for (var i = 1, input; input = inputs[i++]; ) {

            if (input.checked) {

                numChecked++;

            }

        }



        // If all checkboxes have been checked, then check 'all' as well

        inputs[0].checked = numChecked === inputs.length - 1;

    }

}, false);

EDIT:

Based on your request in the comment here is the updated javascript:
http://jsfiddle.net/T5Pm7/

document.getElementById('checkboxes').addEventListener('change', function(e) {

    var el = e.target;

    var inputs = document.getElementById('checkboxes').getElementsByTagName('input');



    // If 'all' was clicked

    if (el.id === 'all') {



        // If 'all' is checked

        if (el.checked) {



            // Loop through the other inputs and removed the check

            for (var i = 1, input; input = inputs[i++]; ) {

                input.checked = false;

            }

        }

    }



    // If another has been clicked, remove the check from 'all'

    else {

        inputs[0].checked = false;

    }

}, false);