Web Analytics Made Easy - StatCounter Parent/Child Checkboxes problems - CodingForum

Announcement

Collapse
No announcement yet.

Parent/Child Checkboxes problems

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Parent/Child Checkboxes problems

    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.

    Code:
    <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">
&nbsp;&nbsp;&nbsp;<input id="b"class="parent-s1" type="checkbox" name="cb1"/>
  <label for="cb1">a</label><br>
&nbsp;&nbsp;&nbsp;<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">
&nbsp;&nbsp;&nbsp;<input id="b"class="parent-s2" type="checkbox" name="cb2"/>
  <label for="cb2">a</label><br>
&nbsp;&nbsp;&nbsp;<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">
    Tags: checkbox, child, form, parent
  • #2
    Code:
    <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 {
    elms=e.getElementsByTagName("INPUT");
    for(var i=elms.length;i--;){
	if(elms[i].name=="cb1" || elms[i].name=="cb2")
	     elms[i].checked=false;
    }
    e.style.display="none";
  }
  return true;
}
</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">
		&nbsp;&nbsp;&nbsp;
		<input id="b1" class="parent-s1" type="checkbox" name="cb1">
  		<label for="cb1">a</label><br>
		&nbsp;&nbsp;&nbsp;
		<input id="b2" 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">
		&nbsp;&nbsp;&nbsp;
		<input id="b3"class="parent-s2" type="checkbox" name="cb2">
  		<label for="cb2">a</label><br>
		&nbsp;&nbsp;&nbsp;
		<input id="b4" class="parent-s2"type="checkbox" name="cb2">
  		<label for="cb2">b</label><br>
	</div>
	<br><br><br>
</form>
</body>
    (element ids must be unique)

    Comment

    • #3
      I tried this but now the auto collapse no longer works.

      Your help is appreciated
      Last edited by MikeyKs1; Sep 11, 2011, 10:05 AM.

      Comment

      • #4
        I just figured ou what you were talking about Thanks a million
        Code:
        <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>
<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 {
    elms=e.getElementsByTagName("INPUT");
    for(var i=elms.length;i--;){
	if(elms[i].name=="cb1" || elms[i].name=="cb2")
	     elms[i].checked=false;
    }
    e.style.display="none";
  }
  return true;
}
</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">
&nbsp;&nbsp;&nbsp;<input id="b1"class="parent-s1" type="checkbox" name="cb1"/>
  <label for="cb1">a</label><br>
&nbsp;&nbsp;&nbsp;<input id="b1" 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">
&nbsp;&nbsp;&nbsp;<input id="b2"class="parent-s2" type="checkbox" name="cb2"/>
  <label for="cb2">a</label><br>
&nbsp;&nbsp;&nbsp;<input id="b2" 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">

        Comment

        Previous template Next
        Working...
        X
        😀
        🥰
        🤢
        😎
        😡
        👍
        👎