Check parent checkbox when child is checked

JavaScript
1

I have the following form:

<form id="topics">
  <p>What do you like?</p>
  <p><input type="checkbox" id="cars" name="topics" value="c" /> <label for="cars">Cars</label></p>
  <p><input type="checkbox" id="games" name="topics" value="g" /> <label for="games">Games</label></p>
    <div id="gameschild">
    <p> &nbsp;&nbsp; <input type="checkbox" id="shooter" name="topics" /> <label for="shooter">Shooter</label></p>
    <p> &nbsp;&nbsp; <input type="checkbox" id="strategy" name="topics" /> <label for="strategy">Strategy</label></p>
    <p> &nbsp;&nbsp; <input type="checkbox" id="simulation" name="topics" /> <label for="simulation">Simulation</label></p>
    <p> &nbsp;&nbsp; <input type="checkbox" id="rpg" name="topics" /> <label for="rpg">RPG</label></p>
    </div>
  <p><input type="checkbox" id="houses" name="topics" value="h" /> <label for="houses">Houses</label></p>
  <p><input type="submit" /></p>
</form>

I want the Games checkbox to be checked when I check one (or more) of it’s child checkboxes (shooter, strategy, simulation, rpg). And the Games checkbox must always remain checked when one or more of the child checkboxes are checked.

I’ve modified an “check all checkboxes” script, so that it (hopefully) checks the Games checkbox when I check one of the child checkboxes, but that didn’t work:


// check Games checkbox when child checkbox is checked

document.getElementById('shooter').onsubmit = checkGames;
document.getElementById('strategy').onsubmit = checkGames;
document.getElementById('simulation').onsubmit = checkGames;
document.getElementById('rpg').onsubmit = checkGames;
document.getElementById('games').elements.all.onsubmit = toggleAll;

function checkGames() {
    checkGamesCheckboxes(this.form, true);
    return false;
}
function toggleAll() {
    checkGamesCheckboxes(this.form, this.checked);
}
function checkGamesCheckboxes(container, checkGames) {
    if (!container || !container.nodeName) {
        container = document;
    }
    var checkboxes = container.getElementsByTagName('input'),
        checkboxesLen = checkboxes.length,
        i,
        checked = checkGames ? true : null;
    for (i = 0; i < checkboxesLen; i += 1) {
        checkboxes[i].checked = checked;
    }
}

Anyone have an idea how to make this work?

2 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
window.onload=function() {
document.getElementById('gameschild').onclick=function() {checkBoxes();};
};

function checkBoxes() {
var aBoxes=document.getElementById('gameschild').getElementsByTagName('input');
var games=document.getElementById('games')
for(var i=0; i<aBoxes.length; i++) {
    if(aBoxes[i].checked) {
        games.checked=true;
        games.disabled=true;
        return;
        }
    }
games.disabled=false;
games.checked=false;
}
</script>

<style type="text/css">
* {margin:0;padding:0;}
</style>

</head>
<body>
<form id="topics">
  <p>What do you like?</p>
  <p><input type="checkbox" id="cars" name="topics" value="c" /> <label for="cars">Cars</label></p>
  <p><input type="checkbox" id="games" name="topics" value="g" /> <label for="games">Games</label></p>
    <div id="gameschild">
    <p> &nbsp;&nbsp; <input type="checkbox" id="shooter" name="topics" /> <label for="shooter">Shooter</label></p>
    <p> &nbsp;&nbsp; <input type="checkbox" id="strategy" name="topics" /> <label for="strategy">Strategy</label></p>
    <p> &nbsp;&nbsp; <input type="checkbox" id="simulation" name="topics" /> <label for="simulation">Simulation</label></p>
    <p> &nbsp;&nbsp; <input type="checkbox" id="rpg" name="topics" /> <label for="rpg">RPG</label></p>
    </div>
  <p><input type="checkbox" id="houses" name="topics" value="h" /> <label for="houses">Houses</label></p>
  <p><input type="submit" /></p>
</form>
</body>
</html>
3

The script doesn’t seem to work well with my other script, when you check one of the child checkboxes, Games is checked, but normally when Games is checked it should take you to “g.html” when you hit Submit, but now it does nothing. I’ll give you the entire code, so you can see what I mean. You do need to make “g.html” in the same folder to make it work:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script type="text/javascript">
window.onload=function() {
document.getElementById('gameschild').onclick=function() {checkBoxes();};
};

function checkBoxes() {
var aBoxes=document.getElementById('gameschild').getElementsByTagName('input');
var games=document.getElementById('games')
for(var i=0; i<aBoxes.length; i++) {
    if(aBoxes[i].checked) {
        games.checked=true;
        games.disabled=true;
        return;
        }
    }
games.disabled=false;
games.checked=false;
}
</script>

</head>


<body>

<form id="topics" action="" method="post">
  <p><a id="checkall" href="#check">Check all</a> / <a id="uncheckall" href="#uncheck">Uncheck all</a></p>
  <p>What do you like?</p>
  <p><input type="checkbox" id="boats" name="topics" value="b" /> <label for="boats">Boats</label></p>
  <p><input type="checkbox" id="cars" name="topics" value="c" /> <label for="cars">Cars</label></p>
  <p><input type="checkbox" id="games" name="topics" value="g" /> <label for="games">Games</label></p>

  <div id="gameschild">
    <p> &nbsp;&nbsp; <input type="checkbox" id="shooter" name="topics" /> <label for="shooter">Shooter</label></p>
    <p> &nbsp;&nbsp; <input type="checkbox" id="strategy" name="topics" /> <label for="strategy">Strategy</label></p>
    <p> &nbsp;&nbsp; <input type="checkbox" id="simulation" name="topics" /> <label for="simulation">Simulation</label></p>
    <p> &nbsp;&nbsp; <input type="checkbox" id="rpg" name="topics" /> <label for="rpg">RPG</label></p>
  </div>

  <p><input type="checkbox" id="houses" name="topics" value="h" /> <label for="houses">Houses</label></p>
  <p><input type="checkbox" id="icecream" name="topics" value="i" /> <label for="icecream">Icecream</label></p>
  <p><input type="checkbox" id="movies" name="topics" value="m" /> <label for="movies">Movies</label></p>
  <p><input type="checkbox" id="pizza" name="topics" value="p" /> <label for="pizza">Pizza</label></p>
  <p><input type="checkbox" id="shopping" name="topics" value="s" /> <label for="shopping">Shopping</label></p>
  <p><input type="checkbox" id="travel" name="topics" value="t" /> <label for="travel">Travel</label></p>
  <p><input type="checkbox" id="waffles" name="topics" value="w" /> <label for="waffles">Waffles</label></p>
  <p><input type="submit" /></p>
</form>


<script type="text/javascript">

var form = document.getElementById('topics');
form.onsubmit = function () {
    var fields = this.elements.topics,
        fieldsLen = fields.length,
        i,
        page = '';
    for (i = 0; i < fieldsLen; i++) {
        if (fields[i].checked) {
            page += fields[i].value;
        }
    }
    location.href = page + '.html';
    return false;
};


// check all/uncheck all

document.getElementById('checkall').onclick = checkAll;
document.getElementById('uncheckall').onclick = uncheckAll;
document.getElementById('topics').elements.all.onclick = toggleAll;
function checkAll() {
    checkAllCheckboxes(this.form, true);
    return false;
}
function uncheckAll() {
    checkAllCheckboxes(this.form, false);
    return false;
}
function toggleAll() {
    checkAllCheckboxes(this.form, this.checked);
}
function checkAllCheckboxes(container, checkAll) {
    if (!container || !container.nodeName) {
        container = document;
    }
    var checkboxes = container.getElementsByTagName('input'),
        checkboxesLen = checkboxes.length,
        i,
        checked = checkAll ? true : null;
    for (i = 0; i < checkboxesLen; i += 1) {
        checkboxes[i].checked = checked;
    }
}
</script>

</body>

</html>

What do I need to change to make this work?

4 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script type="text/javascript">
window.onload=function() {
document.getElementById('gameschild').onclick=function() {checkBoxes();};
};

function checkBoxes() {
var aBoxes=document.getElementById('gameschild').getElementsByTagName('input');
var games=document.getElementById('games')
for(var i=0; i<aBoxes.length; i++) {
    if(aBoxes[i].checked) {
        games.checked=true;
        games.disabled=true;
        return;
        }
    }
games.disabled=false;
games.checked=false;
}
</script>

</head>


<body>

<form id="topics" action="" method="post">
  <p><a id="checkall" href="#check">Check all</a> / <a id="uncheckall" href="#uncheck">Uncheck all</a></p>
  <p>What do you like?</p>
  <p><input type="checkbox" id="boats" name="topics" value="b" /> <label for="boats">Boats</label></p>
  <p><input type="checkbox" id="cars" name="topics" value="c" /> <label for="cars">Cars</label></p>
  <p><input type="checkbox" id="games" name="topics" value="g" /> <label for="games">Games</label></p>
  
  <div id="gameschild">
    <p> &nbsp;&nbsp; <input type="checkbox" id="shooter" name="topics" /> <label for="shooter">Shooter</label></p>
    <p> &nbsp;&nbsp; <input type="checkbox" id="strategy" name="topics" /> <label for="strategy">Strategy</label></p>
    <p> &nbsp;&nbsp; <input type="checkbox" id="simulation" name="topics" /> <label for="simulation">Simulation</label></p>
    <p> &nbsp;&nbsp; <input type="checkbox" id="rpg" name="topics" /> <label for="rpg">RPG</label></p>
  </div>
  
  <p><input type="checkbox" id="houses" name="topics" value="h" /> <label for="houses">Houses</label></p>
  <p><input type="checkbox" id="icecream" name="topics" value="i" /> <label for="icecream">Icecream</label></p>
  <p><input type="checkbox" id="movies" name="topics" value="m" /> <label for="movies">Movies</label></p>
  <p><input type="checkbox" id="pizza" name="topics" value="p" /> <label for="pizza">Pizza</label></p>
  <p><input type="checkbox" id="shopping" name="topics" value="s" /> <label for="shopping">Shopping</label></p>
  <p><input type="checkbox" id="travel" name="topics" value="t" /> <label for="travel">Travel</label></p>
  <p><input type="checkbox" id="waffles" name="topics" value="w" /> <label for="waffles">Waffles</label></p>
  <p><input type="submit" /></p>
</form>


<script type="text/javascript">

var form = document.getElementById('topics');
form.onsubmit = function () {
    var fields = this.elements.topics;
    var fieldsLen = fields.length;
        
    var page = '';
    for (var i = 0; i < fieldsLen; i++) {
        if (fields[i].checked) {
            page += fields[i].value;
        }
    }
    location.href = page + '.html';
    return false;
}


// check all/uncheck all

document.getElementById('checkall').onclick = checkAll;
document.getElementById('uncheckall').onclick = uncheckAll;
//document.getElementById('topics').elements.all.onclick = toggleAll; MS referencing don't use
function checkAll() {
    checkAllCheckboxes(this.form, true);
    return false;
}
function uncheckAll() {
    checkAllCheckboxes(this.form, false);
    return false;
}
function toggleAll() {
    checkAllCheckboxes(this.form, this.checked);
}
function checkAllCheckboxes(container, checkAll) {
    if (!container || !container.nodeName) {
        container = document;
    }
    var checkboxes = container.getElementsByTagName('input'),
        checkboxesLen = checkboxes.length,
        i,
        checked = checkAll ? true : null;
    for (i = 0; i < checkboxesLen; i += 1) {
        checkboxes[i].checked = checked;
    }
}
</script>

</body>

</html>
5

That’s exactly the same code as mine. I think you made a mistake with copying and pasting it into your reply.

6