Tick/Untick checkboxes

[Omzy]

I got 3 checkboxes:

 

1) All Types

2) Type 1

3) Type 2

 

If Type 1 or Type 2 is ticked then All Types should get unticked (if it is ticked)

 

If All Types is ticked then all other boxes should get unticked (if they are ticked)

 

Can someone provide a basic solution to acheive this functionality?

[JustLikeIcarus]

Ok heres an example using jQuery. It assumes the checkboxes have id attributes of "all", "type1" and "type2"

 

$("input[type='checkbox']").click(function(){
  if($(this).attr('id') == 'all'){
    if($(this).is(':checked')){
      $('#type1, #type2').attr('checked', false);
    }
  }else if($('#type1').is(':checked') || $('#type2').is(':checked')){
    $('#all').attr('checked', false);
  }
});

[Omzy]

I'm looking for a simpler solution (not using JQuery).

[JustLikeIcarus]

Thats fine just trying to help.  Although using a framework like jquery will result in a much simpler solution than pure javascript im sure. Not to mention cross browser functionality.

[Omzy]

Can anyone provide a simple function or even inline solution to this.

[RichardRotterdam]

You could just make it radio buttons instead of checkboxes that wouldnt require any javascript and would do the same thing.

<input type="radio" value="all" />All types
<input type="radio" value="type1" />Type 1
<input type="radio" value="type2" />Type 2

[Omzy]

Well the user needs to be able to select multiple checkboxes.

[RichardRotterdam]

Then in that case why not have a single select all checkbox which either checks all values when checked and unchecks all checkboxes when unchecked. From a usability point of view I see more confusion with your original idea rather then using javascript to improve usability.

[Omzy]

That's exactly what I'm trying to acheive.

[JustLikeIcarus]

Can anyone provide a simple function or even inline solution to this.

 

You really should do your best to avoid inline javascript.  Unobtrusive javascript is the way to go.

[RichardRotterdam]

@Omzy

Got it now

 

Here is a startup for a Unobtrusive vanilla javascript

<script type="text/javascript">
window.onload = function(){
  var type_checkboxes = document.getElementById("type_checkboxes").getElementsByTagName("input");

  // add events for all checkboxes inside the type_checkboxes container
  for(var i = 0; i < type_checkboxes.length; i++) {
    var checkbox = type_checkboxes[i];
    
    // check if the "check all" status needs to be changed
    checkbox.onclick = function() {
      alert("the checked status of the clicked element has changed to: "+ this.checked);
    }

  }
  // add event for checkall checkbox
  var checkAll = document.getElementById("checkall");
  checkAll.onclick = function(){
    alert("the checkall checkbox status has changed to :" + this.checked);
  }


}
</script>
<form>
  <fieldset id="type_checkboxes">
    <label>Type 1: <input type="checkbox" name="type[]" value="1" /></label>
    <label>Type 2: <input type="checkbox" name="type[]" value="2" /></label>
    <label>Type 3: <input type="checkbox" name="type[]" value="3" /></label>
    <label>Type 4: <input type="checkbox" name="type[]" value="4" /></label>
    <label>Type 5: <input type="checkbox" name="type[]" value="5" /></label>
    <label>Type 6: <input type="checkbox" name="type[]" value="6" /></label>
  </fieldset>
  <label>Check all: <input type="checkbox" name="checkall" id="checkall" /></label>
</form>

 

The difficulty of the js depends on wether or not the amount of types is dynamic. For example you want to have 10 types selectable instead of just 2. If it's just 2 types you could pretty much pull it all off with mostly the document.getElementById() function. If the types will be dynamic or quite a few your better of using a loop and attaching events like in the example.

[Omzy]

Cheers DJ Kat.

 

I forgot to mention though that all checkboxes need to share the same NAME attribute. That's probably the biggest difficulty in what I'm trying to achieve.

[RichardRotterdam]

Actually in that example i posted all the name attributes are the same except for the "Check all" checkbox. But the value of that checkbox you dont require for submitting anyway so it probably should be the way to go.

 

Your biggest difficulty will be unchecking/checking the "Check all" checkbox when checking/unchecking the type checkboxes

[Omzy]

Well If I don't give the "check all" checkbox a name then I should be able to group all the other checkboxes by using something like getElementsByName()? Do you know how I could implement this (using your sample solution)?

[RichardRotterdam]

Not exactly sure what you mean but let me explain the code a bit.

 

in the html you will see the following:

<fieldset id="type_checkboxes">
    <label>Type 1: <input type="checkbox" name="type[]" value="1" /></label>
    <label>Type 2: <input type="checkbox" name="type[]" value="2" /></label>
    <label>Type 3: <input type="checkbox" name="type[]" value="3" /></label>
    <label>Type 4: <input type="checkbox" name="type[]" value="4" /></label>
    <label>Type 5: <input type="checkbox" name="type[]" value="5" /></label>
    <label>Type 6: <input type="checkbox" name="type[]" value="6" /></label>
</fieldset>
<label>Check all: <input type="checkbox" name="checkall" id="checkall" /></label>

All the type checkboxes are grouped inside a fieldset element using "type_checkboxes" as id. You will notice the "Check all" checkbox is outside this fieldset which is good because it has a different functionality then the regular type checkboxes.

 

now in the JS there is the following line:

var type_checkboxes = document.getElementById("type_checkboxes").getElementsByTagName("input");

What this line does is find all input elements within the fieldset element. If you have firebug for firefox and try this:

console.log(type_checkboxes)

You will see that is a collection of the type checkboxes.

 

[Omzy]

Ok cool I get it.

 

Just a quick question - if I don't give the "check_all" checkbox a name attribute then does it still append to the GET query string? I noticed some empty variables in my query string.

[JustLikeIcarus]

No but all of your types will be checked so they will

[Omzy]

This is how I managed to do it in the end:

 

function proptypeBoxes(index)
  {
   var type_checkboxes = document.getElementsByName("prop_type[]");
   for (var i = 0; i < type_checkboxes.length; i++)
   {
     if(index.value!='')
     {
      document.getElementById('all_types').checked = false;
     }
     else if(index.value=='')
     {
      type_checkboxes[i].checked = false;
     }
   }
  }

<input type="checkbox" name="" value="" id="all_types" onclick="proptypeBoxes(this)" />All types
<input type="checkbox" name="prop_type[]" value="type1" onclick="proptypeBoxes(this)" />Type 1
<input type="checkbox" name="prop_type[]" value="type2" onclick="proptypeBoxes(this)" />Type 2

 

Works exactly how I want it to.