Results 1 to 6 of 6

Thread: check all checkbox

  1. #1
    Join Date
    Sep 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default check all checkbox

    i am working in aspnet and i have a gridview, after all aspnet render it as a table, a i wanna to have a select all checkbox, when i check it then check all the checkboxes in the column, and when i uncheck a least one , uncheck the check all checkbox, and when i check the last checkbox unchecked, check the check all checkbox.


    iŽll really appreciate some help.

    excuse me for my english.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Here's a demo:

    http://home.comcast.net/~jscheuer1/side/table_check.htm

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title>Table Check</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #t1, #t2 {
    width:250px;
    float:left;
    margin-right:1em;
    }
    #t2 {
    width:400px;
    }
    .all input, .all span {
    display:none;
    }
    #t1 th, #t1 td, #t2 th, #t2 td {
    padding:3px 5px 3px 3px;
    }
    .clear {
    clear:left;
    }
    </style>
    <script type="text/javascript">
    
    /*Check/Uncheck columns script © John Davenport Scheuer
     *visit: http://www.dynamicdrive.com/forums
     *username: jscheuer1
     *This notice must remain for legal use  */
    
    //set 'check all' label
    var allp='Check All'
    
    //Multiple tables, each w/unique id? (use 1 for yes, 0 for no)
    var tids=1
    
    //Initialize 'check all' cells display? (use 1 for yes, 0 for no)
    var initca=1
    
    /////////////////Stop Editing////////////
    allp=new RegExp(allp);
    
    function findRow(box){
    var tr=box.parentNode;
    while (tr.parentNode&&!/^tr$/i.test(tr.tagName))
    tr=tr.parentNode;
    return /^tr$/i.test(tr.tagName)? tr : null;
    }
    
    function findCell(box){
    var td=box.parentNode;
    while (td.parentNode&&!/^th$|^td$/i.test(td.tagName))
    td=td.parentNode;
    return /^th$|^td$/i.test(td.tagName)? td : null;
    }
    
    function findCol(box){
    var tr=findRow(box);
    for (var i_tem = 0; i_tem < tr.cells.length; i_tem++)
    if (tr.cells[i_tem]==findCell(box))
    return tids? tr.parentNode.parentNode.id+i_tem : i_tem;
    }
    var boxes=[]
    function initcheckAll(){
    var c=0, inp=document.getElementsByTagName('input');
    for (var i_tem = 0; i_tem < inp.length; i_tem++)
    if (inp[i_tem].type.toLowerCase()=='checkbox'&&findCell(inp[i_tem])){
    boxes[c++]=[inp[i_tem], findCell(inp[i_tem])];
    boxes[c-1][0].col=findCol(boxes[c-1][0])
    }
    for (i_tem = 0; i_tem < boxes.length; i_tem++)
    if (allp.test(boxes[i_tem][1].innerHTML)){
    for (var i = 0; i < boxes[i_tem][1].childNodes.length; i++)
    if(initca&&boxes[i_tem][1].childNodes[i].tagName&&/^div$/i.test(boxes[i_tem][1].childNodes[i].tagName))
    boxes[i_tem][1].childNodes[i].style.display='none';
    else if(initca&&boxes[i_tem][1].childNodes[i].tagName)
    boxes[i_tem][1].childNodes[i].style.display='inline';
    boxes[i_tem][0].onclick=function(){
    for (var i_tem = 0; i_tem < boxes.length; i_tem++)
    if(this.checked&&boxes[i_tem][0].col==this.col)
    boxes[i_tem][0].checked=1;
    else if (boxes[i_tem][0].col==this.col)
    boxes[i_tem][0].checked=0;
    };
    }
    else
    boxes[i_tem][0].onclick=function(){
    if(!this.checked){
    for (var i_tem = 0; i_tem < boxes.length; i_tem++)
    if(boxes[i_tem][0].col==this.col){
    boxes[i_tem][0].checked=0;
    return;
    }
    }
    else{
    var b=[];
    for (var i_tem = 0; i_tem < boxes.length; i_tem++)
    if(boxes[i_tem][0].col==this.col)
    b[b.length]=boxes[i_tem][0];
    if (!b[0].checked)
    for (i_tem = 1; i_tem < b.length; i_tem++)
    if(!b[i_tem].checked)
    return;
    b[0].checked=1;
    }
    };
    }
    onload=initcheckAll;
    </script>
    </head>
    <body>
    <table id="t1" border="1">
    <tr>
        <th colspan="2">Table One</th>
    </tr>
    <tr class="all">
    <td><div>Col #1 </div><input type="checkbox"><span> Check All</span></td><td><div>Col #2 </div><input type="checkbox"><span> Check All</span></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    </table>
    <table id="t2" border="1">
    <tr>
        <th colspan="4">Table Two</th>
    </tr>
    <tr class="all">
    <td><div>Col #1 </div><input type="checkbox"><span> Check All</span></td><td><div>Col #2 </div><input type="checkbox"><span> Check All</span></td>
    <td><div>Col #3 </div><input type="checkbox"><span> Check All</span></td><td><div>Col #4 </div><input type="checkbox"><span> Check All</span></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    <td><input type="checkbox"></td><td><input type="checkbox"></td>
    </tr>
    </table>
    <div class="clear"></div>
    </body>
    </html>
    Notes on Configuration -

    Set this variable to a unique text string that appears in all table cells that contain a master toggle checkbox (case sensitive):
    Code:
    //set 'check all' label
    var allp='Check All'
    Set this variable to 1 if you have more than one table on the page that will be using the script. Otherwise use 0. If Using with more than one table, each table that will use the script must have a unique id.
    Code:
    //Multiple tables, each w/unique id? (use 1 for yes, 0 for no)
    var tids=1
    Set this variable to 1 to show no master toggle checkbox if javascript is disabled. Otherwise use 0. If using this option set to 1, the cell containing the master toggle checkbox must follow general guidelines and certain styles must be set for its elements:
    Code:
    //Initialize 'check all' cells display? (use 1 for yes, 0 for no)
    var initca=1
    Guidelines for using the above option: The cell containing the master toggle checkbox will contain a checkbox, a span and a division (in any order). The span will contain text that will only be displayed if javascript is enabled. The division will contain text that will only be displayed if javascript is disabled, example:

    Code:
    <td><div>Col #1 </div><input type="checkbox"><span> Check All</span></td>
    In the above the red element will be displayed if there is no javascript, otherwise the green ones and the blue text will be displayed. In the above example, the blue text is also our 'check all' label, the allp variable. Now, for this to work, the javascript visible elements must have their display initially set to none somehow. This can be done with inline style or in the stylesheet. I used the stylesheet, selecting on a class name for the row containing these 'masters':

    the style:
    Code:
    .all input, .all span {
    display:none;
    }
    the markup:
    HTML Code:
    <tr class="all">
    <td><div>Col #1 </div><input type="checkbox"><span> Check All</span></td><td><div>Col #2 </div><input type="checkbox"><span> Check All</span></td>
    </tr>
    Last edited by jscheuer1; 09-10-2006 at 09:14 AM. Reason: cosmetic changes/simplify
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Awesome John. That's a really useful script...
    - Mike

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by mburt
    Awesome John. That's a really useful script... :p
    Thanks mburt, I hope the OP likes it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    I've found your script very useful in general.
    I've a problem on my page, I've 14 columns and in 3 of them there are checkboxes i.e. in column 10,11 and 14. Your script has finally done what I was looking for in checking, unchecking all boxes in single column but right now I've lost chance to eneble/disable fileds in a single row which I had before under checkboxes in column 14.
    Can you please help me to achive this?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Please start a new thread for a new question and include your code, or better yet a link to your page. You may refer back to this thread if you like.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •