Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    checkboxes to check/uncheck all

    I spent some time last week looking through several JavaScript code sources to find some code that would allow me to do the "check/uncheck" all thing from another checkbox. What I pieced together works here, but I wanted to verify that this is the best way to code this.

    Here's my simple list of checkboxes:

    <form action="check_all_test.html" method="post" name="listingform" id="listingform">

    <input type="checkbox" name="check_all_top" onClick="checkAllSwitchTop()" /><br />
    <input type="checkbox" name="manage[]" value="3" /><br />
    <input type="checkbox" name="manage[]" value="1" /><br />
    <input type="checkbox" name="manage[]" value="2" /><br />
    <input type="checkbox" name="check_all_bottom" onClick="checkAllSwitchBottom()" />

    </form>

    And here's my JavaScript in the header of the page:

    <script language="JavaScript" src="" type="text/javascript">
    function checkAllSwitchTop() {
    var checkVal = false;
    if(document.listingform.check_all_top.checked == true) {
    checkVal = true;
    }
    count = document.listingform.elements.length;
    for (i=0; i < count; i++) {
    document.listingform.elements[i].checked = checkVal;
    }
    }
    function checkAllSwitchBottom() {
    var checkVal = false;
    if(document.listingform.check_all_bottom.checked == true) {
    checkVal = true;
    }
    count = document.listingform.elements.length;
    for (i=0; i < count; i++) {
    document.listingform.elements[i].checked = checkVal;
    }
    }
    </script>

    So my questions are...

    1) Is there a way to do this w/ ONE function? I want to have a working check/uncheck all box at the top AND the bottom of my list.
    2) Is there also a way to specify that I only wan to check/uncheck all the checkboxes w/ the name="manage[]"?


    Thanks,

    Shaun

  • #2
    New Coder
    Join Date
    Nov 2004
    Location
    Tampa, FL
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Shaun,

    Here is my attempt to your questions...

    <html>
    <head>
    <script>
    function checkUncheckAll(f,fldName){
    var frm = f.form;
    if(f.checked){
    for(var i = 0;i < frm.elements[fldName].length;i++){
    frm.elements[fldName][i].checked = true;
    }
    }else{
    for(var i = 0;i < frm.elements[fldName].length;i++){
    frm.elements[fldName][i].checked = false;
    }
    }
    }
    </script>
    </head>
    <body>
    <form>
    <input type="checkbox" name="check_all_top" onClick="checkUncheckAll(this,'manage')" />Select All<br />
    <input type="checkbox" name="manage" value="3" /><br />
    <input type="checkbox" name="manage" value="1" /><br />
    <input type="checkbox" name="manage" value="2" /><br />
    <input type="checkbox" name="check_all_bottom" onClick="checkUncheckAll(this,'manage')" />Select All
    </form>
    </body>
    </html>

    Hope this helps.

    Pennstater

  • #3
    Regular Coder
    Join Date
    Dec 2002
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Here's an allSomeNone function for a checkbox array!

    Here's the allSomeNone function I use in my online resume:
    Code:
    function allSomeNone(checkbox,selector,widget)
    {
    	if(selector.name==widget.name)
    	{
    		if(selector.selectedIndex==0)
    			for(var i=0;i<checkbox.length;i++)
    				checkbox[i].checked=true;
    		if(selector.selectedIndex==2)
    			for(var i=0;i<checkbox.length;i++)
    				checkbox[i].checked=false;
    	};
    	var sum=0;
    	for(var i=0;i<checkbox.length;i++)
    		if(checkbox[i].checked)sum++;
    	selector.selectedIndex=(sum==0?2:(sum==checkbox.length?0:1));
    };
    It is called on both the checkboxes and the select control that sets/identifies how many are checked in the checkbox array.

    Here's the actual HTML code used:

    Code:
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Chief Information Officer (CIO)
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Chief Technology Officer (CTO)
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Client/Server Architect
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Consultant
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Curriculum Developer
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Entrepreneur
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Information Architect
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Innovator
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Instructor
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Internet Technologist
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Lecturer
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Project Leader
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Project Manager
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Software Developer
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Software Engineer
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Speaker
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Systems Analyst
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Technical Writer
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Trainer
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Web Designer
    <INPUT onclick=with(this.form){allSomeNone(objective,r_objective,this)} type=checkbox CHECKED name=objective>Workshop Leader
    <SELECT onchange=with(this.form){allSomeNone(objective,r_objective,this)} name=r_objective>
    <OPTION selected>all</OPTION>
    <OPTION>some</OPTION>
    <OPTION>none</OPTION>
    </SELECT>
    If you select all or none, the checkboxes change accordingly. If you toggle some of the checkboxes, the select displays the some value.

    Does this help?

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Never quite understood the conviction that when one is "gang-checking" checkboxes, one must use a...checkbox.

    Grouping Checkboxes: How to make a "Heading" Checkbox control subordinate checkboxes?

    jmo


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •