SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Thread: checkboxes

  1. #1
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    checkboxes

    hi guys!! javascript idiot is back!! heres my braincraking problem for the week!!

    referer to this url first, so i will not exhaust myself explaining..

    http://lancevincent.275mb.com/test/index.html

    did you really open the site? yes? ok..

    its quite simple, but too advance for my nut-sized brain.. if all coluimn is check, all items are check.if only a column is check, only those under that column is checked. clicking the checkbox unchecks the appropriate items..

    the logic is simple, but i cant figure it out.. please dont suggest samples using names with pattern.., maybe we can use div or span tags for this to group similar items.. please help.. i badly need it...
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2004
    Posts
    1,647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi..
    we supouse that your checkboxes are into a table if you want to check selected columns else we supouse that your all checkboxes will be checked by clicking check all..
    Code:
    function do_check(type_, obj, cell_) {
    var obj, list, i;
    obj = (type_ == 1) ? obj = document : (typeof obj == "string") ? document.getElementById(obj) : obj;
    list = obj.getElementsByTagName("checkbox");
    if(type_ == 1) {
    for(i = 0; i < list.length; i++) {
    if(obj.tBodies[0].rows[i].cells[cell_].childNodes[0].type == "checkbox") {
    switch(obj.tBodies[0].rows[i].cells[cell_].childNodes[0].checked) {
    case true: obj.tBodies[0].rows[i].cells[cell_].childNodes[0].checked = false; break;
    case false: obj.tBodies[0].rows[i].cells[cell_].childNodes[0].checked = true; break;
    }
    }
    }
    } else {
    for(i = 0; i < list.length; i++) {
    switch(list[i].checked) {
    case true: list[i].checked = false; break;
    case false: list[i].checked = true; break;
    }
    }
    }
    you call it onclick="do_check(0, 0, 0)" if you want check all
    else if you want check just a column the first colums is always 0 and you call it like onclick="do_check(1, "table_id", 3) " where 3 is the fourth column..
    cheers

  3. #3
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, and thanks a lot!!

    but, reminder, i didnt quite get what you mean, can you make my example online work at least please? ill go and try your code myself.. but in case i cant, at least your there..
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  4. #4
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i surrender, i cant make them work...but my current table design is the same as my example online.. then on the checkboxes, i included the function like
    Code:
    <input name="cont_1" type="checkbox" value="1" onclick="do_check(1, "table_id", 0) "/>
    since cont_1 is my first column..

    oh dear..please help..
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  5. #5
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and its returning some javascript error on IE..really stupid browser...
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2004
    Posts
    1,647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    table_id means that you enter the id of your table
    cheers

  7. #7
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i did that...
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  8. #8
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <table width="98%" border="0" align="center" cellpadding="4" cellspacing="0" id="table_id">
    so i dont have to edit "table_id" on the function call
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  9. #9
    SitePoint Wizard
    Join Date
    Mar 2004
    Posts
    1,647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    explain me the error please..
    regards

  10. #10
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its just that, nothing happens..., ok, ill try to encorporate your code to the one i posted online, and see the errors..give me 5 minutes..
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  11. #11
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, please check the url i have above..ive incorporated the code you gave me, which i cant make work.. im using mozilla fyi..

    thanks !!
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  12. #12
    SitePoint Wizard
    Join Date
    Mar 2004
    Posts
    1,647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi...
    first of all change onclick="javascript:do_check(0, 0, 0);" to onclick="do_check(0, 0, 0);" and for all other onclick events...
    regards

  13. #13
    SitePoint Wizard
    Join Date
    Mar 2004
    Posts
    1,647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this function works perfectly...
    to check all use onclick="do_check(1, 0, 0);"
    to check the selected column use onclick="do_check(0, 'table_id', 1);" (the example check all checkboxes in column 2)
    Code:
    function do_check(type_, obj, cell_) {
    var obj, list_, i;
    obj = (type_ == 1) ? obj = document : (typeof obj == "string") ? document.getElementById(obj) : obj;
    list_ = obj.getElementsByTagName("input");
    if(type_ == 0) {
    for(i = 0; i < obj.rows.length; i++) {
    if(i > 1) {
    if(obj.rows[i].cells[cell_].childNodes[0].type == "checkbox") {
    switch(obj.rows[i].cells[cell_].childNodes[0].checked) {
    case true: obj.rows[i].cells[cell_].childNodes[0].checked = false; break;
    case false: obj.rows[i].cells[cell_].childNodes[0].checked = true; break;
    }
    }
    }
    }
    } else {
    for(i = 0; i < list_.length; i++) {
    if(i > 4) {
    if(list_[i].type == "checkbox") {
    switch(list_[i].checked) {
    case true: list_[i].checked = false; break;
    case false: list_[i].checked = true; break;
    ]
    }
    }
    }
    }
    }
    the problem is that the function count cells not breaks into the cell!!!!
    cheers

  14. #14
    SitePoint Enthusiast johnmanoahs's Avatar
    Join Date
    Jul 2004
    Location
    India
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also try the functions below where the checkboxes are parsed using their names. Blocks of checkboxes are identified with the naming conventions. Try this .....

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> SELECT CHECK </TITLE>
    <META NAME="Author" CONTENT="John Manoah">
    <script>
    	function fn_CheckAll(ChkNo1)
    	{
    		var objChk = document.getElementsByTagName('input');
    		for(i=0;i<objChk.length;i++)
    		{
    			if(objChk[i].type.toLowerCase() == 'checkbox')
    			{
    				var temp = "Check"+ChkNo1;
    				if(objChk[i].name.indexOf(temp) != -1)
    				{
    					objChk[i].checked = true;
    				}
    			}
    		}
    	}
    
    	function fn_unCheckAll(ChkNo1)
    	{
    		var objChk = document.getElementsByTagName('input');
    		for(i=0;i<objChk.length;i++)
    		{
    			if(objChk[i].type.toLowerCase() == 'checkbox')
    			{
    				var temp = "Check"+ChkNo1;
    				if(objChk[i].name.indexOf(temp) != -1)
    				{
    					objChk[i].checked = false;
    				}
    			}
    		}
    	}
    </script>
    </HEAD>
    
    <BODY>
    
    <table width="300" border="1" cellspacing="0">
    	<tr>
    		<td width="100" align="center"><input type="checkbox" onClick="if(this.checked){fn_CheckAll(1)} else{fn_unCheckAll(1)}"></td>
    		<td width="100" align="center"><input type="checkbox" onClick="if(this.checked){fn_CheckAll(2)} else{fn_unCheckAll(2)}"></td>
    		<td width="100" align="center"><input type="checkbox" onClick="if(this.checked){fn_CheckAll(3)} else{fn_unCheckAll(3)}"></td>
    	</tr>
    
    	<tr>
    		<td width="100" align="center"><input type="checkbox" name="Check1_1"></td>
    		<td width="100" align="center"><input type="checkbox" name="Check2_1"></td>
    		<td width="100" align="center"><input type="checkbox" name="Check3_1"></td>
    	</tr>
    
    	<tr>
    		<td width="100" align="center"><input type="checkbox" name="Check1_2"></td>
    		<td width="100" align="center"><input type="checkbox" name="Check2_2"></td>
    		<td width="100" align="center"><input type="checkbox" name="Check3_2"></td>
    	</tr>
    </table>
    
    
    </BODY>
    </HTML>


    - John
    If you think you are too small to make an
    influence, try sleeping with a mosquito in a closed room.


Bookmarks

Posting Permissions

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