We Keep Coding

How do I check if another checkbox is checked and perform the function again with added conditions?

So I was tasked with creating a menu in which the user will choose between four noodles, four main dishes, and three sides. The sides will multiply the price of the main dish. The catch is that for every noodle the user checked, it will be incremented to the total price by 50%. So, if the user pays $120 and chooses two noodles, it will be $180.
I know that the checkbox will call for two functions, but I have no clue as to how it would work only if there are two or more checked checkboxes. Can someone help or guide me into how to actually perform this?
Fiddle
function pmodel() {
Model();
finalCost();
}
function Model() {
if (document.querySelector('input[name="NDLS"]:checked')) {
document.getElementById("MMD").disabled = false;
document.getElementById("ADDONS").disabled = false;
} else {
document.getElementById("MMD").disabled = true;
document.getElementById("ADDONS").disabled = true;
}
}
function total() {
var selected1 = document.querySelector('input[name="MD"]:checked').value;
var selected2 = document.querySelector('input[name="ADDONS"]:checked').value;
//var totals = 0;
totals = (selected1 * selected2);
finalCost(totals);
}
function finalCost(totals) {
//totals += (totals * document.querySelector('input[id="PMODEL"]').value);
document.getElementById("amount").value = totals;
}
<fieldset id="MNDLS">
<legend>Noodles</legend>
<input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Spaghetti</label><br>
<input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Carbonara</label><br>
<input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Lasagna</label><br>
<input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Plain</label>
</fieldset>
<fieldset id="MMD" disabled>
<legend>Main Dish</legend>
<input type="radio" name="MD" value="50" onclick="total()">
<label>Chicken Wings ($50)</label><br>
<input type="radio" name="MD" value="55" onclick="total()">
<label>Chicken Breast ($55)</label><br>
<input type="radio" name="MD" value="60" onclick="total()">
<label>Pork Cutlets ($60)</label><br>
<input type="radio" name="MD" value="65" onclick="total()">
<label>Steak($65)</label>
</fieldset>
<fieldset id="ADDONS" disabled>
<legend>Sides</legend>
<input type="radio" name="ADDONS" value="1" onclick="total()">
<label>Nothing (100%)</label><br>
<input type="radio" name="ADDONS" value="1.5" onclick="total()">
<label>Softdrinks (150%)</label><br>
<input type="radio" name="ADDONS" value="2" onclick="total()">
<label>Softdrinks and Fries (200%)</label>
</fieldset>
<br>
<p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" value="" /></p>

First of all don't use same ID more than once, they should be unique.
Instead of that you can set your checkboxes with same class (just for ease selecting) and then count how many of them are checked:
function pmodel() {
var count = 0;
var list=document.getElementsByClassName("PNDLS");
for (var i = 0; i < list.length; ++i) { if(list[i].checked) { count++; } }
console.log(count);
}
<fieldset id="MNDLS">
<legend>Noodles</legend>
<input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Spaghetti</label><br>
<input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Carbonara</label><br>
<input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Lasagna</label><br>
<input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Plain</label>
</fieldset>
<fieldset id="MMD" disabled>
<legend>Main Dish</legend>
<input type="radio" name="MD" value="50" onclick="total()">
<label>Chicken Wings ($50)</label><br>
<input type="radio" name="MD" value="55" onclick="total()">
<label>Chicken Breast ($55)</label><br>
<input type="radio" name="MD" value="60" onclick="total()">
<label>Pork Cutlets ($60)</label><br>
<input type="radio" name="MD" value="65" onclick="total()">
<label>Steak($65)</label>
</fieldset>
<fieldset id="ADDONS" disabled>
<legend>Sides</legend>
<input type="radio" name="ADDONS" value="1" onclick="total()">
<label>Nothing (100%)</label><br>
<input type="radio" name="ADDONS" value="1.5" onclick="total()">
<label>Softdrinks (150%)</label><br>
<input type="radio" name="ADDONS" value="2" onclick="total()">
<label>Softdrinks and Fries (200%)</label>
</fieldset>
<br>
<p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" value="" /></p>

check all function with outputting labels into a div

i have a group of check boxes and i want to use a check all function but only for the corresponding checkboxes for example if i click checkAll1 it will only highlight checkItem 1 but also will still allow me to check other check boxes.
you will see from the snippet below the code i currently have, i want to also be able to put the checkAll label when it comes out to the #check div to be in a p tag so i can style it.
hope this all makes sense
Many thanks
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can use value to call checkbox, Do something like this..
var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");
var chk3 = $("input[type='checkbox'][value='3']");
var chk4 = $("input[type='checkbox'][value='4']");
var chk5 = $("input[type='checkbox'][value='5']");
var chk6 = $("input[type='checkbox'][value='6']");
chk1.on('change', function(){
chk2.prop('checked',this.checked);
});
chk3.on('change', function(){
chk4.prop('checked',this.checked);
});
chk5.on('change', function(){
chk6.prop('checked',this.checked);
});
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + "<p></p>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1" value="1"><label for="checkAll1" >Check All</label>
<input type="checkbox" id="checkItem1" value="2"> <label for="checkItem1" >Item 1</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item 2</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item3</label>
<hr />
<input type="checkbox" id="checkAll2" value="3"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3" value="5"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3" value="6"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>

I tweak your code a little, and what you mean by able to put the checkAll label when it comes out to the #check div which i did't get it, try this below code :
$("input[type='checkbox']").change(function() {
$("#checked").empty();
$("input[type='checkbox']:checked").each(function() {
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
$(".checkAll").click(function() {
if ( $(this).is(':checked') )
$(this).siblings(':checkbox').prop('checked', true);
else
$(this).siblings(':checkbox').prop('checked', false);
});
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll1" class="checkAll">
<label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll2" class="checkAll">
<label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll3" class="checkAll">
<label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item3</label>
</div>
<p>You have selected:</p>
<div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
p/s : like other said, id must be unique for elements

Assign a same class for the same row check boxes
Use the below jquery
$("#checkAll1").change(function(){
$(".checkItem1").prop("checked", true);
});
$("#checkAll2").change(function(){
$(".checkItem2").prop("checked", true);
});
$("#checkAll3").change(function(){
$(".checkItem3").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" class="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" class="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
let me know if it is helpful

addClassRules() to multiple fields but only allow 1 at a minimum

So I have 10 checkbox fields, more then 1 can be selected, but at least 1 has to be selected at a minimum.
I had it working use the name="" attribute but that was not the case anymore as the name has to be unique to integrate with our CRM.
So I added the rule to use the class instead using addClassRule() and I added my own method to use a custom message for required.
But the result is they are all required. regardless if 1 or more is selected?
Here is my jQuery which is working but it requires all 10 checkbox's to be checked.
$.validator.addMethod("checkboxRequired", $.validator.methods.required, "Please select at least 1 of the values");
jQuery.validator.addClassRules('checkbox-validate', {
checkboxRequired: true
});
HTML code:
<div id="id_1" class="form-input">
<label for="test1"><input class="checkbox-validate" type="checkbox" id="test1" name="test1" value="1">1</label>
<label for="test2"><input class="checkbox-validate" type="checkbox" id="test2" name="test2" value="2">2</label>
<label for="test3"><input class="checkbox-validate" type="checkbox" id="test3" name="test3" value="3">3</label>
<label for="test4"><input class="checkbox-validate" type="checkbox" id="test4" name="test4" value="4">4</label>
<label for="test5"><input class="checkbox-validate" type="checkbox" id="test5" name="test5" value="5">5</label>
<label for="test6"><input class="checkbox-validate" type="checkbox" id="test6" name="test6" value="6">6</label>
<label for="test7"><input class="checkbox-validate" type="checkbox" id="test7" name="test7" value="7">7</label>
<label for="test8"><input class="checkbox-validate" type="checkbox" id="test8" name="test8" value="8">8</label>
<label for="test9"><input class="checkbox-validate" type="checkbox" id="test9" name="test9" value="9">9</label>
<label for="test10"><input class="checkbox-validate" type="checkbox" id="test10" name="test10" value="10">10</label>
</div>

Try require_from_group-method rule
jQuery(function($) {
jQuery.validator.addClassRules('checkbox-validate', {
require_from_group: [1, ".checkbox-validate"]
});
var validator = $('#myform').validate({
rules: {},
messages: {},
errorPlacement: function(error, element) {
if (element.hasClass('checkbox-validate')) {
element.closest('.form-input').find('.error-holder').html(error)
} else {
error.insertAfter(element);
}
}
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>
<form id="myform" method="post" action="">
<div id="id_1" class="form-input">
<label for="test1">
<input class="checkbox-validate" type="checkbox" id="test1" name="test1" value="1" />1</label>
<label for="test2">
<input class="checkbox-validate" type="checkbox" id="test2" name="test2" value="2" />2</label>
<label for="test3">
<input class="checkbox-validate" type="checkbox" id="test3" name="test3" value="3" />3</label>
<label for="test4">
<input class="checkbox-validate" type="checkbox" id="test4" name="test4" value="4" />4</label>
<label for="test5">
<input class="checkbox-validate" type="checkbox" id="test5" name="test5" value="5" />5</label>
<label for="test6">
<input class="checkbox-validate" type="checkbox" id="test6" name="test6" value="6" />6</label>
<label for="test7">
<input class="checkbox-validate" type="checkbox" id="test7" name="test7" value="7" />7</label>
<label for="test8">
<input class="checkbox-validate" type="checkbox" id="test8" name="test8" value="8" />8</label>
<label for="test9">
<input class="checkbox-validate" type="checkbox" id="test9" name="test9" value="9" />9</label>
<label for="test10">
<input class="checkbox-validate" type="checkbox" id="test10" name="test10" value="10" />10</label>
<span class="error-holder"></span>
</div>
<input type="submit" value="Save" />
</form>

You need to make your name attribute all be the same value. Then you can check how many are checked like so:
var count = $('input[name=test]:checked').size();

Checkbox(javascript) selection, first item showing undefined?

I am trying to select and return some items(checkbox). Everything is okay, but the first item is always showing UNDEFINED. can't fix this problem!
My code is as below
function checkList () {
var checked;
var i;
for( i = 0; i < document.form1.length; i++) {
var element = document.form1[i]
if (element.type == "checkbox"){
if (element.checked == true){
checked = checked + element.value + "<br/>";
}
}
}
document.getElementById('checked').innerHTML = checked;
}
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2" >Book</label>
<br/>
<input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox3">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>

Try to Change
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2" for="checkbox">Book</label>
<br/>
<input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox3" for="checkbox" for="checkbox">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>
to This....
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2">Book</label>
<br/>
<input type="checkbox" name="checkbox3" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox4" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>
You have multiple duplications within the code such as (for="")
Let me know, Thanks

Change
var checked; // like this, checked is undefined
to
var checked = ""; // now it's simply empty
here's a fiddle
http://jsfiddle.net/sq9938b0/

The issue is that you initialize checked variable as undefined. When you append the string to undefined it is converted to string "undefined", hence it appearing at the beginning.
Just initialize it as an empty string: var checked = "";
function checkList () {
var checked = "";
var i;
for( i = 0; i < document.form1.length; i++) {
var element = document.form1[i]
if (element.type == "checkbox"){
if (element.checked == true){
checked = checked + element.value + "<br/>";
}
}
}
document.getElementById('checked').innerHTML = checked;
}
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2" for="checkbox">Book</label>
<br/>
<input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox3" for="checkbox" for="checkbox">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>

Take a look of the following step
checked = checked + element.value + "";
In the first loop you have not defined checked. So first time it is
checked = undefined + pen
Intialize
var checked = ''

Managing checkbox states based on various user behaviors

I have a list of checkboxes and I want to be able to check all of them when I click on the "All campuses" box. Alternatively, I want to the "All campuses" checkbox to uncheck when one of the campuses from the list gets unchecked and stay unchecked unless I manually check the campuses I previously unchecked. To be a bit clearer, here are the scenarious i'm looking for the program to handle:
User clicks on "All campuses" and all checkboxes are checked
User clicks on every single individual checkboxes for each campus and the "All campuses" checkbox automatically gets checked.
User unchecks the "All campuses" checkbox and everything gets unchecked.
User clicks on the "All campuses" checkbox and then all checkboxes get checked. Afterward, the user unchecks one of the campuses from the list and the "All campuses" checkbox is unchecked, but the rest of the campuses stay the same.
I added a jsFiddle with what I currently have. It currently handles scenario 1, 3 and 4 but I'm having trouble with it handling 2. Any ideas?
<input name="statewideCampus" type="checkbox" value="New" class="radio allCampuses" />All Campuses
<br />
<br />
<table style="width: 100%" class="campuses">
<tr>
<td>
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Apache Junction
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Aravaipa
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Bullhead City
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Chandler-Gilbert
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Chinle
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Communiversity # Surprise
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />East Valley
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Fort Defiance
<br />
</td>
<td>
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Ganado
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />GateWay
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Glendale
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Kayenta
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Keams Canyon
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Lake Havasu City
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Mesa
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />North Valley
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Paige
<br />
</td>
<td>
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Paradise Valley
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Phoenix
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Phoenix Biomedical
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Prescott
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Scottsdale
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Show Low
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Signal Peak
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />South Mountain
<br />
</td>
<td>
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Thatcher
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Tuba City
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Tucson
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Tucson North
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Verde Valley
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />West Valley
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Whiteriver
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Yavapai
<br />
</td>
</tr>
</table>
Here is the jQuery:
$('.allCampuses').attr('checked', true);
$('.campuses input').attr('checked', true);
$('.allCampuses').click(function () {
if ($(this).is(':checked')) {
$('.campuses input').attr('checked', true);
} else {
$('.campuses input').attr('checked', false);
}
});
$('.campuses input').click(function () {
if ($(this).is(':checked')) {
$('.allCampuses').attr('checked', true);
} else {
$('.allCampuses').attr('checked', false);
}
});
http://jsfiddle.net/E9KnM/
Thanks!

I would compare the length of the lists of checked and list of inputs. Also, you need to use prop instead of attr when you are changing it:
$('.allCampuses, .campuses input').attr('checked', true);
$('.allCampuses').on('change', function () {
$('.campuses input').prop('checked', $(this).is(':checked'));
});
$('.campuses input').on('change', function() {
$('.allCampuses').prop('checked', $('.campuses input').length == $('.campuses input:checked').length);
});
Fiddle: http://jsfiddle.net/E9KnM/2/

$('.campuses input').click(function () {
if ($(this).is(':checked')) {
$('.allCampuses').attr('checked', true);
var totalCheckes = $( ".campuses input" ).length;
var totalCheckedCheckBox = $( ".campuses input:checked").length;
if(totalCheckes == totalCheckedCheckBox){
$('.allCampuses').prop('checked', true);
}
} else {
$('.allCampuses').attr('checked', false);
}
});