I am in need of making a jquery based interface where on change of select causes appropriate checkeboxes to be marked. For eg I am listing Group in a drop down each group have its members. For eg group A have 5 members. Every Member is listed when A user select groupA all checkbox(5 users) checkbox will get auto selected Here is what I have now
<?php
$groups[]= array(12 => array ( 1,2,3,4,5),13=>array ( 32,25,26),14=>array(22,23));
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
function selecttheuser()
{
$(document).ready(function() {
var gidet=$("select#group_id").val();
alert(gidet);
});
}
</script>
<select style="width:466px" name="group_id" id="group_id" onchange="selecttheuser()">
<option value="0">Not a Group Event</option>
<option value="12">Gname</option>
<option value="13">Groupname2</option>
</select>
<input type="checkbox" value="19" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="20" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="21" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="22" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="23" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="32" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="25" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="26" class="frnzchk" name="frnzchk[]"><br>
I have 2 problems
Here's how I would have solve this problem.
First I'll show you the working code and then I'll explain it after.
<?php
$groups = array(
12 => array(1, 2, 3, 4, 5),
13 => array(32, 25, 26),
14 => array(22, 23)
);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Page Title Goes Here</title>
<style type="text/css">
#group_id{ width:466px; }
</style>
</head>
<body>
<select name="group_id" id="group_id">
<option value="0">Not a Group Event</option>
<option value="12">Gname</option>
<option value="13">Groupname2</option>
</select>
<?php
// Loop through each group id
foreach(array_keys($groups) as $groupId)
{
// Create a div that can be identified by the group id
// to hold the checkboxes
$divId = 'group_' . $groupId;
echo '<div id="' . $divId . '">';
// Loop through each id for this particular group
foreach($groups[$groupId] as $choice)
{
// Create the checkbox
echo '<input type="checkbox" '
. 'value="' . $choice . '" '
. 'class="frnzchk" '
. 'name="frnzchk[]"/>'
. '<br/>';
}
echo '</div>';
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
// Wait until everything is loaded
$(document).ready(function(){
// Bind the "change" function to the group_id drop down
$('#group_id').change(function(){
// Clear all of the choices
$('.frnzchk').attr('checked', false);
// Create the id of the div containing choices
var groupId = '#group_' + $(this).val();
// Check all of the choices for the appropriate group id
$(groupId)
.find('input[type="checkbox"]')
.attr('checked', true);
})
});
</script>
</body>
</html>
Here's the first chunk:
<?php
$groups = array(
12 => array(1, 2, 3, 4, 5),
13 => array(32, 25, 26),
14 => array(22, 23)
);
?>
This is your list of groups and the choices associated with them. Notice when you declare the array you don't need the square brackets i.e. $groups = array() instead of $groups[] = array().
Next I put in all of the plumbing for a complete HTML5 page that will validate[1]. I moved your CSS out of the HTML because it makes it easier to organize, and in practice this should be moved to a completely separate CSS file.
Here's the next important chunk:
<?php
// Loop through each group id
foreach(array_keys($groups) as $groupId)
{
// Create a div that can be identified by the group id
// to hold the checkboxes
$divId = 'group_' . $groupId;
echo '<div id="' . $divId . '">';
// Loop through each id for this particular group
foreach($groups[$groupId] as $choice)
{
// Create the checkbox
echo '<input type="checkbox" '
. 'value="' . $choice . '" '
. 'class="frnzchk" '
. 'name="frnzchk[]"/>'
. '<br/>';
}
echo '</div>';
}
?>
This loops through each of your groups, and creates a DIV to hold all of the choices for that group. The div is identified by the id group_12, group_13, or group_14; The numbers come from the keys used in the $groups array.
Next is the Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
// Wait until everything is loaded
$(document).ready(function(){
// Bind the "change" function to the group_id drop down
$('#group_id').change(function(){
// Clear all of the choices
$('.frnzchk').attr('checked', false);
// Create the id of the div containing choices
var groupId = '#group_' + $(this).val();
// Check all of the choices for the appropriate group id
$(groupId)
.find('input[type="checkbox"]')
.attr('checked', true);
})
});
</script>
I placed this all at the end of the body because Javascript runs in a single thread, so this means if you load it up front like you had it, nothing else can load until the javascript has finished loading[2]. In this example it's not a big deal, but when you have a lot of javascript it can make a big difference!
You'll notice that I wrapped everything inside $(document).ready(function(){}) - this is because you don't want it to work until everything is loaded. Since you had $(document).ready(function(){}) inside your function, every time that function gets called, it will check to see if everything is loaded, and if it's not, then you won't see anything happen.
I bound the change() function to the select element, which means it will be called whenever the select element is changed, and the code inside that function will be called. We reset all of the choices, and then select all of the choices that are contained in the appropriate div.
That should do it! Happy coding!
[1] - http://validator.w3.org