MikeyKs1
09-11-2011, 12:22 PM
After a parent checkbox has been selected and the user changes their mind and just unchecks the Parent checkbox I need to figure out how to automatically uncheck the child checkboxes as well.
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}
</script>
<script type="text/javascript">
$('input[type=checkbox]').change(function() {
// get id of the current clicked element
var id = $(this).attr('id');
// find elements with classname 'parent-<id>' and (un)check them
var children = $('.parent-' + id).attr('checked', $(this).attr('checked'));
});
</script>
<body>
<form name='f1' action='#'>
<h2 align="center">Test</h2><br>
<br>
<input id="s1" type="checkbox" onclick="return toggleMe('para1')" value="1">1
<br>
<div id="para1" style="display:none">
<input id="b"class="parent-s1" type="checkbox" name="cb1"/>
<label for="cb1">a</label><br>
<input id="b" class="parent-s1"type="checkbox" name="cb1"/>
<label for="cb1">b</label>
<br>
</div>
<input type="checkbox" onclick="return toggleMe('para2')" value="2">2
<br>
<div id="para2" style="display:none">
<input id="b"class="parent-s2" type="checkbox" name="cb2"/>
<label for="cb2">a</label><br>
<input id="b" class="parent-s2"type="checkbox" name="cb2"/>
<label for="cb2">b</label>
<br>
</div>
<script type='text/javascript'>
function Cb2Rb( setRef )
{
this.boxGroup = setRef;
for( var i=0, len=setRef.length; i<len; i++ )
setRef[ i ].onclick=( function(inst, idx){return function(){inst.scan(idx)}} )(this, i);
this.scan=function(index)
{
if( this.boxGroup[ index ].checked )
for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
if( i != index )
g[i].checked = false;
}
}
new Cb2Rb( document.forms.f1.cb1 );
new Cb2Rb( document.forms.f1.cb2 );
</script>
<script type='text/javascript'>
function sub_delete{
if (typeof document.checks.cb.length === 'undefined') {
/*then there is just one checkbox with the name 'cb' no array*/
if (document.checks.cb.checked == true )
{
document.checks.submit();
return 0;
}
}else{
/*then there is several checkboxs with the name 'cb' making an array*/
for(var i = 0, max = document.checks.cb.length; i < max; i++){
if (document.checks.cb[i].checked == true )
{
document.checks.submit();
return 0;
}
}
}
}//sub_delete end
</script>
<script type='text/javascript'>
$('input[class*="parent"]').change(function(){
var cls = '.' + $(this).attr('class') + ':checked';
var len = $(cls).length;
var parent_id = '#' + $(this).attr('class').split('-')[1];
// 3. Check parent if at least one child is checked
if(len) {
$(parent_id).attr('checked', true);
} else {
// 2. Uncheck parent if all childs are unchecked.
$(parent_id).attr('checked', false);
}
});
</script>
<br><br><br>
<input type="button" class="button" onclick="return toggleMe('para10')" value="Submit">
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}
</script>
<script type="text/javascript">
$('input[type=checkbox]').change(function() {
// get id of the current clicked element
var id = $(this).attr('id');
// find elements with classname 'parent-<id>' and (un)check them
var children = $('.parent-' + id).attr('checked', $(this).attr('checked'));
});
</script>
<body>
<form name='f1' action='#'>
<h2 align="center">Test</h2><br>
<br>
<input id="s1" type="checkbox" onclick="return toggleMe('para1')" value="1">1
<br>
<div id="para1" style="display:none">
<input id="b"class="parent-s1" type="checkbox" name="cb1"/>
<label for="cb1">a</label><br>
<input id="b" class="parent-s1"type="checkbox" name="cb1"/>
<label for="cb1">b</label>
<br>
</div>
<input type="checkbox" onclick="return toggleMe('para2')" value="2">2
<br>
<div id="para2" style="display:none">
<input id="b"class="parent-s2" type="checkbox" name="cb2"/>
<label for="cb2">a</label><br>
<input id="b" class="parent-s2"type="checkbox" name="cb2"/>
<label for="cb2">b</label>
<br>
</div>
<script type='text/javascript'>
function Cb2Rb( setRef )
{
this.boxGroup = setRef;
for( var i=0, len=setRef.length; i<len; i++ )
setRef[ i ].onclick=( function(inst, idx){return function(){inst.scan(idx)}} )(this, i);
this.scan=function(index)
{
if( this.boxGroup[ index ].checked )
for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
if( i != index )
g[i].checked = false;
}
}
new Cb2Rb( document.forms.f1.cb1 );
new Cb2Rb( document.forms.f1.cb2 );
</script>
<script type='text/javascript'>
function sub_delete{
if (typeof document.checks.cb.length === 'undefined') {
/*then there is just one checkbox with the name 'cb' no array*/
if (document.checks.cb.checked == true )
{
document.checks.submit();
return 0;
}
}else{
/*then there is several checkboxs with the name 'cb' making an array*/
for(var i = 0, max = document.checks.cb.length; i < max; i++){
if (document.checks.cb[i].checked == true )
{
document.checks.submit();
return 0;
}
}
}
}//sub_delete end
</script>
<script type='text/javascript'>
$('input[class*="parent"]').change(function(){
var cls = '.' + $(this).attr('class') + ':checked';
var len = $(cls).length;
var parent_id = '#' + $(this).attr('class').split('-')[1];
// 3. Check parent if at least one child is checked
if(len) {
$(parent_id).attr('checked', true);
} else {
// 2. Uncheck parent if all childs are unchecked.
$(parent_id).attr('checked', false);
}
});
</script>
<br><br><br>
<input type="button" class="button" onclick="return toggleMe('para10')" value="Submit">