5

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.

4
  • You can't throw more than one element with the id server in your DOM.
    – user229044
    Jul 29, 2013 at 2:14
  • i am generating this with php so i cant get them have unique id
    – Kishore
    Jul 29, 2013 at 2:14
  • group.checked == false; all.checked == false. You meant to do some assignment. Please modify it to group.checked = false; all.checked = false;
    – Prash
    Jul 29, 2013 at 2:18
  • 1
    @Kishore You have to. Your page is invalid. You can not reuse IDs. If you're using PHP, it should be even easier to assign unique IDs.
    – user229044
    Jul 29, 2013 at 2:27

4 Answers 4

6

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);
5
  • this code toggles checkbox with all id i dont this. I want it like jsfiddle.net/heera/bGwrS/30
    – Kishore
    Jul 29, 2013 at 2:20
  • can you make one more change. If all the checkbox is uncheck it should automatically check checkbox with id all @samer
    – Kishore
    Jul 29, 2013 at 2:34
  • in the example i gave if chicago and Texas are clicked and then unclicked automatically all will be checked. can you please update with this.
    – Kishore
    Jul 29, 2013 at 2:37
  • there is another problem. All is checked by default, so is there a way to disable unchecking it. Coz if they uncheck all there will be no results to fetch. Only way to uncheck all is by checking other checkboxes. I tried disabled property but what happens is total program stops working. Can you make this change pls? Sorry for asking more.
    – Kishore
    Jul 29, 2013 at 9:38
  • Here you go my friend: jsfiddle.net/c7jwN . I added lots of comments for you, but you can remove the comments afterwards.
    – Samer
    Jul 29, 2013 at 13:35
0

You can only assign the same id to one element. What you want to do is give them a class="servers" and then use document.getElementsByClassName("servers"); in your JavaScript.

0

You cannot have same id for multiple HTML elements. You could do something like this to achieve what you are asking for.

<form>
<input type="checkbox" id="all" value="all" name="all" onChange="check(this, 'a')" checked/>ALL <br/>
<input type="checkbox" id="servers1" value="xampp" name="server[]" onChange="check(this, 's')" />XAMPP <br/>
<input type="checkbox" id="servers2" value="wamp" name="server[]" onChange="check(this, 's')" />WAMP <br/>
<input type="checkbox" id="servers3" value="mamp" name="server[]" onChange="check(this, 's')" />MAMP <br/>
<input type="checkbox" id="servers4" value="amp" name="server[]" onChange="check(this, 's')" />AMP <br/>
</form>

<script>
function check(cb, type){
    var all = document.getElementById("all");

    if (type == "a" && cb.checked){
        var els = document.getElementsByName("server[]");
        for(var i = 0; i < els.length; ++i)
           els[i].checked = false;
    } else if( type == "s" && cb.checked) {
        all.checked = false;
    }
}
</script>
1
  • this is what i wanted. but the problem is i am generating this form with php. so i cant get them have unique id. is there a solution for that.
    – Kishore
    Jul 29, 2013 at 2:24
-1

put this function

function jvcheck(id,Vale){
 Checkboxesclass = '.group'+id;
 $(Checkboxesclass).each(function() {
    this.checked = Vale;
});

}

and then put this code in your main checkbox

jvcheck('group222',this.checked);

all checkbox with class group222 now checked .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.