SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    autocheck checkboxes on button click

    Is there any way of me altering the following code to only check the checkbox with IDs that contain the letter 'A'
    e.g. <input type=checkbox name=list value="1A">Java<br>

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <SCRIPT LANGUAGE="JavaScript">
        
    var checkflag = "false";
    
    function check(field) {
        if (checkflag == "false") {
            for (i = 0; i < field.length; i++) {
            field[i].checked = true;}
            checkflag = "true";
            return "Uncheck All"; }
        else {
            for (i = 0; i < field.length; i++) {
            field[i].checked = false; }
            checkflag = "false";
            return "Check All"; }
        }
    </script>
    
    </head>
    <body>
    <form name=myform action="" method=post runat=server>
    <table>
    <tr><td>
    <b>Your Favorite Scripts & Languages</b><br>
    
    <input type=checkbox name=list value="1">Java<br>
    <input type=checkbox name=list value="2">JavaScript<br>
    <input type=checkbox name=list value="3">ASP<br>
    <input type=checkbox name=list value="4">HTML<br>
    <input type=checkbox name=list value="5">SQL<br>
    <br>                                                    
    <input type=button value="Check All" onClick="this.value=check(this.form.list)"> 
    </td></tr>
    </table>
    </form>
    </body>
    </html>

  2. #2
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    var id = someElement.id;
    if(id.indexOf('A') != -1){
    //make it checked
    }

  3. #3
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm, have tried what you suggested, however i still cant get it to work. I dont get an errors, however the checkboxes do not check. COuld you have another quick look please:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <SCRIPT LANGUAGE="JavaScript">
        
    var checkflag = "false";
    
    function check1(field) {
        if (checkflag == "false") {
            for (i = 0; i < field.length; i++) {
                var id = field[i].id;
                if(id.indexOf('A') != -1){
                    field[i].checked = true; 
                }
            }
            checkflag = "true";
            return "Uncheck All"; }
        else {
            for (i = 0; i < field.length; i++) {
                var id = field[i].id;
                if(id.indexOf('A') != -1){
                    field[i].checked = false; 
                }
            }
            checkflag = "false";
            return "Check All"; }
        }
    
    
    </script>
    
    </head>
    <body>
    <form name=myform action="" method=post runat=server>
    <table>
    <tr><td>
    <b>Your Favorite Scripts & Languages</b><br>
    
    <input type=checkbox name=list value="1A">Java<br>
    <input type=checkbox name=list value="2A">JavaScript<br>
    <input type=checkbox name=list value="3A">ASP<br>
    <input type=checkbox name=list value="4">HTML<br>
    <input type=checkbox name=list value="5">SQL<br>
    <br>                                                    
    <input type=button value="Check All" onClick="this.value=check1(this.form.list)"> 
    </td></tr>
    </table>
    </form>
    </body>
    </html>
    Much appreciated

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    None of your checkboxes have ids

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ID vs Name

    I think what the previous person was trying to say is that you are trying to use the id property of an element that doesn't have an id attribute. You could use:

    Code:
    var val = field[i].value;
    if(val.indexOf('A') != -1){
        field[i].checked = true; 
    }
    Also, to use

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" >
    you should really have valid XHTML, which means all of those attributes need to be encapsulated by quotes. ie name="list".

    Also, isn't the name attribute supposed to be unique?

  6. #6
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By altering the code to incorporate the id, everythin works ok.

    However, im trying to change the function to the following:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <SCRIPT LANGUAGE="JavaScript">
    
    function check(field,x) {
            for (i = 0; i < field.length; i++) {
                var id = field[i].id;
                if (field[i].checked == true)
                {
                    if (x = "All")
                    {
                        field[i].checked = true; 
                    }
                    else
                    {
                        if(id.indexOf(x+'-') != -1){
                            field[i].checked = true; 
                        }
                    }  
                }
                else
                {
                    if (x = "All")
                    {
                        field[i].checked = false; 
                    }
                    else
                    {
                        if(id.indexOf(x+'-') != -1){
                            field[i].checked = false; 
                        }
                    }  
                }
            }
    }
    </script>
    
    </head>
    <body>
    <form name=myform action="" method=post runat=server>
    <table>
    <tr><td>
    <b>Checkbox Example</b><br>
    
    <input type=checkbox name=list id="1-1" value="1A">A<br>
    <input type=checkbox name=list id="1-2" value="2A">A<br>
    <input type=checkbox name=list id="2-1" value="3A">A<br>
    <input type=checkbox name=list id="2-2" value="4">B<br>
    <input type=checkbox name=list id="2-3" value="5">B<br>
    <br>            
    <input type=checkbox id="Checkbox" onClick="this.value=check(this.form.list,1)">Check All A<br>         
    <input type=checkbox id="Checkbox1" onClick="this.value=check(this.form.list,2)">Check All B<br>     
    <input type=checkbox id="Checkbox2" onClick="this.value=check(this.form.list,All)">Check All B<br>                               
    </td></tr>
    </table>
    </form>
    </body>
    </html>
    Can you see any problems with the above code?

  7. #7
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any ideas?

  8. #8
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bewise View Post
    Can you see any problems with the above code?
    Yes.

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    Language attribute is deprecated, use: type='text/javascript'

    Code:
    for (i = 0; i < field.length; i++)
    Global variable used.

    Code:
      if (x = "All")
    Wrong operator

    Code:
    onClick="this.value=check(this.form.list,All)"
    Second parameter not passed as a string. Read the JavaScript console - that's why it's there.

  9. #9
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if (x = "All")

    assigns the value "All" to x

    I think you meant
    if (x == "All")


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
  •