Tick/Untick checkboxes

Discussion in 'JavaScript' started by Omzy, Dec 7, 2009.

0
  1. #1
    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 any are ticked)

    All 3 checkboxes need to share the same NAME attribute.

    Can someone provide a basic solution to acheive this functionality?
     
    Omzy, Dec 7, 2009 IP
  2. mastermunj

    mastermunj Well-Known Member

    Messages:
    687
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    110
    #2
    Do you want only one of them to be made selected? If so then use Radio buttons. It allows only one to be selected at a time..

    If I've misunderstood your problem, please elaborate a bit with example :)
     
    mastermunj, Dec 7, 2009 IP
  3. Omzy

    Omzy Peon

    Messages:
    249
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Nope I require multiple selections. So 'Type 1' and 'Type 2' can be selected together but 'All Types' cannot be selected if any of the other options have been selected.
     
    Omzy, Dec 7, 2009 IP
  4. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #4
    A very simple example for it

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Check/Uncheck</title>
</head>

<script>
function check_uncheck(){
  if(document.getElementById("all_types").checked){
    document.getElementById("type1").checked="checked";
    document.getElementById("type2").checked="checked";
  }else{
    document.getElementById("type1").checked="";
    document.getElementById("type2").checked="";
  }
}

function is_all_checked(){
  if(document.getElementById("type1").checked && document.getElementById("type2").checked){
    document.getElementById("all_types").checked="checked";
  }

  if(!document.getElementById("type1").checked || !document.getElementById("type2").checked){
    document.getElementById("all_types").checked="";
  }
}
</script>

<body>

<div>All Types<input type="checkbox" id="all_types" name="all_types" onclick="check_uncheck();"></div>
<div>Type 1<input type="checkbox" id="type1" name="type1" onclick="is_all_checked();"></div>
<div>Type 2<input type="checkbox" id="type2" name="type2" onclick="is_all_checked();"></div>

</body>

</html>
    Code (markup):
     
    s_ruben, Dec 7, 2009 IP
  5. Omzy

    Omzy Peon

    Messages:
    249
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    The thing is that was a very simplified example that I provided, in reality I have around 10+ checkboxes, is there a way of dynamically doing this rather than hardcoding in each checkbox id?
     
    Omzy, Dec 7, 2009 IP
  6. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #6
    s_ruben, Dec 7, 2009 IP
  7. temp2

    temp2 Well-Known Member

    Messages:
    1,231
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    150
    Digital Goods:
    2
    #7
    you can try some js examples from checkbox
     
    temp2, Dec 7, 2009 IP