I want to use jquery to do something depending on which checkbox is clicked. For some reason the onClick even is not being triggered for any of these checkboxes below.
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<SCRIPT language="javascript">
$(document).ready(function() {
$("#group1").click(function() {
$('.group1').attr('checked', this.checked);
});
});
function checkGroup (id ) {
// ...
// do anything you want here
alert ("id: "+id+" "name: " + id.name);
//...
}
</script>
<script type="text/javascript">
</script>
<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
<a href="">Link</a>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="group1" name="master" onClick="javascript:checkGroup('group1');"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<th><input type="checkbox" id="group2" name="master" onClick="javascript:checkGroup('group2');"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
</table>
</BODY>
EDIT
Ok i have updated it as shown below. It works for the first group of checkboxes but not for the second group.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<SCRIPT language="javascript">
$(document).ready(function() {
$("#masterCheckBox").click(function() {
$('.' + $(this).attr('class')).attr('checked', this.checked);
});
});
</script>
<title>Multiple Checkbox Select/Deselect - DEMO</title>
</head>
<body>
<a href="">Link</a>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="masterCheckBox" name="master" class="master1"/></th>
<th>Master</th>
<th>Rating</th>
</tr>
<tr>
<th><input type="checkbox" id="child1" class="master1" name="child"/></th>
<th>Child</th>
<th>Rating</th>
</tr>
<tr>
<th><input type="checkbox" id="child1" class="master1" name="child"/></th>
<th>Child</th>
<th>Rating</th>
</tr>
</table>
<table border="1">
<tr>
<th><input type="checkbox" id="masterCheckBox" name="master" class="master2"/></th>
<th>Master</th>
<th>Rating</th>
</tr>
<tr>
<th><input type="checkbox" id="child1" class="master2" name="child"/></th>
<th>Child</th>
<th>Rating</th>
</tr>
<tr>
<th><input type="checkbox" id="child1" class="master2" name="child"/></th>
<th>Child</th>
<th>Rating</th>
</tr>
</table>
</BODY>
</HTML>
EDIT
Ok i here is another update. It now works for different groups of checkboxes using the class element. The if statement only triggers the event if the checkbox is a master checkbox.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<SCRIPT language="javascript">
$(document).ready(function() {
$('input[type=checkbox]').click(function() {
if($(this).attr('name')=='master'){
$('.' + $(this).attr('class')).attr('checked', this.checked);
}
});
});
</script>
<title>Multiple Checkbox Select/Deselect - DEMO</title>
</head>
<body>
<a href="">Link</a>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="masterCheckBox" name="master" class="master1"/></th>
<th>Master</th>
<th>Rating</th>
</tr>
<tr>
<th><input type="checkbox" id="child1" class="master1" name="child"/></th>
<th>Child</th>
<th>Rating</th>
</tr>
<tr>
<th><input type="checkbox" id="child1" class="master1" name="child"/></th>
<th>Child</th>
<th>Rating</th>
</tr>
</table>
<table border="1">
<tr>
<th><input type="checkbox" id="masterCheckBox" name="master" class="master2"/></th>
<th>Master</th>
<th>Rating</th>
</tr>
<tr>
<th><input type="checkbox" id="child1" class="master2" name="child"/></th>
<th>Child</th>
<th>Rating</th>
</tr>
<tr>
<th><input type="checkbox" id="child1" class="master2" name="child"/></th>
<th>Child</th>
<th>Rating</th>
</tr>
</table>
</BODY>
</HTML>
Now i need to change it so that if a child checkbox for a particular group is unchecked, i need to check that the master checkbox is only checked if at least one of the child checkboxes is checked.
Edit
Ok here is another update with a working version of what i am trying to achieve.
- When the master checkbox is clicked, all its child checkboxes are checked
- When any child checkbox is clicked, its corresponding master is also checked
- When a child is unchecked, its corresponding master will be unchecked if there is no other checked child in the same group.
Please suggest any tips/hints of how this can be improved.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<SCRIPT language="javascript">
$(document).ready(function() {
$('input[type=checkbox]').click(function() {
if($(this).attr('name')=='master'){
$('.' + $(this).attr('class')).attr('checked', this.checked);
}
if($(this).attr('name')=='child'){
var childChecked = false;
$('.' + $(this).attr('class')).each(function(){
if (this.checked && this.name=="child"){
childChecked=true;
}
});
if (childChecked==false){
$('.' + $(this).attr('class')).each(function(){
if (this.name=='master'){
this.checked = childChecked;
}
});
}else{
$('.' + $(this).attr('class')).each(function(){
if (this.name=='master'){
this.checked = childChecked;
}
});
}
}
});
});
</script>
<title>Multiple Checkbox Select/Deselect - DEMO</title>
</head>
<body>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="masterCheckBox" name="master" class="master1"/></th>
<th>Master</th>
<th>Rating</th>
</tr>
<tr>
<th><input type="checkbox" id="child1" class="master1" name="child"/></th>
<th>Child</th>
<th>Rating</th>
</tr>
<tr>
<th><input type="checkbox" id="child1" class="master1" name="child"/></th>
<th>Child</th>
<th>Rating</th>
</tr>
</table>
<table border="1">
<tr>
<th><input type="checkbox" id="masterCheckBox" name="master" class="master2"/></th>
<th>Master</th>
<th>Rating</th>
</tr>
<tr>
<th><input type="checkbox" id="child1" class="master2" name="child"/></th>
<th>Child</th>
<th>Rating</th>
</tr>
<tr>
<th><input type="checkbox" id="child1" class="master2" name="child"/></th>
<th>Child</th>
<th>Rating</th>
</tr>
</table>
</BODY>
</HTML>
1) You don’t need to specify “javascript:”, What else would it be? This doesn’t break your code, it’s just bad form.
2)
alert ("id: "+id+" "name: " + id.name);should be:3)
'#group1'(which addresses an ID) then'.group1'which addresses an class name, which isn’t even present in your page.