SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict dr_dumb99's Avatar
    Join Date
    Sep 2004
    Location
    Pakistan
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question "Select All" Check Box Problem

    Hi!
    I have following "Select All" checkbox code :

    /*****************************/
    function selectall(){
    t=document.frm.length;

    for(i=0; i<t; i++) {
    document.frm[i].checked=true;
    }
    }
    /*****************************/

    This code selects all checkboxes on a web page. But I want that, this code should select certain range of checkboxes, instead of selecting all checkboxes.

    What modifications are required to achieve this thing?

    Thanks in advance

  2. #2
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <script type="text/javascript">
    
    function selectall(){
    var el =document.frm.elements;
    for(i=0; i< el.length; i++) {
    if(el[i].value=="faraoqazam") { el[i].checked = true ; }
    }
    }
    </script>
    
    <form name="frm">
    <input type="checkbox" name="dr_dumb99" value="faraoqazam"><br>
    <input type="checkbox" name="dr_dumb99" value="faraoqazam"><br>
    <input type="checkbox" name="dr_dumb99" value="faraoqazam"><br>
    <input type="checkbox" name="dr_dumb99" value="muazzez"><br>
    <input type="button" value="select all" onclick="selectall()">
    </form>
    Code:
      
    <script type="text/javascript">
    
    function selectall(){
    var el, i = 0;
    while(el = document.getElementsByName("dr_dumb99")[i++]){
    el.checked = true ;
    }
    }
    </script>
    
    <form name="frm">
    <input type="checkbox" name="dr_dumb99"><br>
    <input type="checkbox" name="dr_dumb99"><br>
    <input type="checkbox" name="dr_dumb99"><br>
    <input type="checkbox" name="pepejeria"><br>
    <input type="button" value="select all" onclick="selectall()">
    </form>
    Code:
      
    <script type="text/javascript">
    
    function selectall(){
    var el, i = 0;
    while(el = document.getElementById("chk"+(i++))){
    el.checked = true ;
    }
    }
    
    </script>
    
    <form name="frm">
    <input type="checkbox" name="checkboxname" id="chk0"><br>
    <input type="checkbox" name="checkboxname" id="chk1"><br>
    <input type="checkbox" name="checkboxname" id="chk2"><br>
    <input type="checkbox" name="checkboxname" id="myid"><br>
    <input type="button" value="select all" onclick="selectall()">
    </form>
    Code:
      
    <script type="text/javascript">
    
    function selectall(){
    var arr = ["dr_dumb99","jimfraser","sterofog"]
    var el, i = 0;
    while(el = document.getElementsByName(arr[i++])[0]) { 
    el.checked = true ; 
    }
    }
    </script>
    
    <form name="frm">
    <input type="checkbox" name="dr_dumb99"><br>
    <input type="checkbox" name="jimfraser"><br>
    <input type="checkbox" name="sterofog"><br>
    <input type="checkbox" name="felgall"><br>
    <input type="button" value="select all" onclick="selectall()">
    </form>
    Code:
     
    <script type="text/javascript">
    
    function selectall(){
    var arr = ["raffles","mrhoo","dr_dumb99"]
    var el, i = 0;
    while(el = document.getElementById(arr[i++])) { 
    el.checked = true ; 
    }
    }
    </script>
    
    <form name="frm">
    <input type="checkbox" id="raffles" name="myname"><br>
    <input type="checkbox" id="mrhoo" name="myname"><br>
    <input type="checkbox" id="dr_dumb99" name="myname"><br>
    <input type="checkbox" id="logic-ali" name="myname"><br>
    <input type="button" value="select all" onclick="selectall()">
    </form>
    className
    Code:
     
    <script type="text/javascript">
    
    function selectall(){
    var el =document.frm.elements;
    for(i=0; i< el.length; i++) {
    if(el[i].className=="dr_dumb99") { el[i].checked = true ; }
    }
    }
    </script>
    
    <form name="frm">
    <input type="checkbox" name="myname" class="dr_dumb99"><br>
    <input type="checkbox" name="myname" class="dr_dumb99"><br>
    <input type="checkbox" name="myname" class="dr_dumb99"><br>
    <input type="checkbox" name="myname" class="rajug"><br>
    <input type="button" value="select all" onclick="selectall()">
    </form>
    Code:
     
    <script type="text/javascript">
    
    function selectall(myid){
    var el =document.getElementById(myid);
    el = el.getElementsByTagName('*');
    for(i=0; i< el.length; i++) { el[i].checked = true ; }
    }
    </script>
    <style type="text/css">
    form { margin:auto; width:15em;} 
    fieldset {padding:1ex; border:1px solid lime; font-size:14px; color:red;} 
    label {display:block; text-align:left; color:brown;} 
    input {margin-left:1em; } 
    .myclass {display:block; margin:auto; background-color:orange; color:blue;} 
    </style>
    <form name="frm">
    <fieldset id="myfield0"> 
    <legend>my heading 1</legend> 
    <label><input type="checkbox" name="myname">aaaa</label> 
    <label><input type="checkbox" name="myname">bbbb</label> 
    <label><input type="checkbox" name="myname">cccc</label> 
    <label><input type="checkbox" name="myname">dddd</label> 
    <input type="button" class="myclass" onclick="selectall('myfield0')" value="select all">
    
    </fieldset> 
    
    <fieldset id="myfield1">
    <legend>my heading 2</legend> 
    <label><input type="checkbox" name="myname">eeee</label> 
    <label><input type="checkbox" name="myname">ffff</label> 
    <label><input type="checkbox" name="myname">gggg</label> 
    <label><input type="checkbox" name="myname">hhhh</label> 
    <input type="button" class="myclass" onclick="selectall('myfield1')" value="select all">
    </fieldset>
    
    </form>
    Last edited by muazzez; May 9, 2007 at 11:22.

  3. #3
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can put specific class name to your checkboxes, and check whether matching it is the matching checkboxes you want. Or find all checkboxes element under a specific form.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Third Stone From The Sun
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check the checkbox based on a certain condition. Could be it's parentNode, className, value or some DOM attribute.

    I'd use array.forEach (you'll need the ArrayExtras patch for IE).
    My outdated site is down for a while now.

  5. #5
    SitePoint Addict dr_dumb99's Avatar
    Join Date
    Sep 2004
    Location
    Pakistan
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!
    Can you tell me how to put check on classname.

    Thanks in advacne

  6. #6
    SitePoint Addict dr_dumb99's Avatar
    Join Date
    Sep 2004
    Location
    Pakistan
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!
    Can "select all" function works with "Form" in web page? If so then kinldy guide me in "Select All" code modifications

    Thanks in advance

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    NL, Rotterdam
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    There are some decisions to be made imo:

    1) What property of the input element can be used to identify the checkboxes you want to be checked? Can be the name, a specific classname, a custom attribute.

    2) From what node in the DOM will you start looking for the elements? You could for instance group the checkboxes in a div or fieldset element with an id and take that as a starting point. (which would perhaps make point 1 superfluous)

    When you've determined your approach you must be able to get things going using the previously given examples.


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
  •