SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Passionate Web Developer Egyptechno's Avatar
    Join Date
    Jan 2004
    Location
    Dubai
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Check All with arrays !

    Hello,

    I think the problem or the idea is very clear and popular .. especially with Vbulletin ..


    It's that checkbox [ check all ] and so that it checks all the checkboxes under it ..


    I've found many code .. but It really doesn't work with me ..

    because my checkboxes is refernced by PHP Array like
    PHP Code:
    echo "
    <input type='checkbox' name='arr[]'>
    <input type='checkbox' name='arr[]'>
    <input type='checkbox' name='arr[]'>
    <input type='checkbox' name='arr[]'>"

    so that it will be arr[0], arr[1], arr[2] .. etc

    Any help ?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Give each checkbox that you want to set a class and then use that to determine which to check in the checkAll function.

    PHP Code:
    echo 
    <input type='checkbox' name='arr[]' class='arr'> 
    <input type='checkbox' name='arr[]' class='arr'> 
    <input type='checkbox' name='arr[]' class='arr'> 
    <input type='checkbox' name='arr[]' class='arr'>"

    Javascript:
    Code:
    function checkAll() {
    var inp = document.getElementsByTagName('input');
    for (var i = inp.length - 1; i >= 0; i--) {
    if (inp[i].className == 'arr') inp[i].checked = true;
    }}
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Passionate Web Developer Egyptechno's Avatar
    Join Date
    Jan 2004
    Location
    Dubai
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you first ..

    Secondly,

    Please Iam kinda .. just a user for Javascript >> uses some codes around

    So I need to know in the above Code ..
    document.getElementsByTagName('input');
    input = ?

    inp.length
    inp[i].className

    inp = ?

    And do I have to create that class on the CSS file ?

    Thanks Again

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    You can use the function:

    document.getElementsByName("arr[]")

    to return an array containing all your checkboxes. Then if you use a for loop, you can set each element of the array's .checked property to true.

    So, you need to:

    1) add a checkbox with the caption "check all".
    2) put an onclick event handler in the "check all" checkbox
    3) have the onclick event handler call a function: onclick="myCheckAllFunction()"
    4) inside the function use getElementsByName() to get the array of all your elements.
    5) use a for loop to loop through the array and set all the elements of the array's .checked property to true: myCheckBoxArray[i].checked = true;

  5. #5
    Passionate Web Developer Egyptechno's Avatar
    Join Date
    Jan 2004
    Location
    Dubai
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    7stud .. Thanks for your guide ..

    Probably .. It's first time for me to type Javascript function

    So, don't get bored quickly

    this what I've made :
    PHP Code:
    <script language="Javascript">
    function 
    checkAll() {
        
    document.getElementsByName("eg_array[]");
        for (var 
    i=0;  ieg_array.lengthi++) {
            
    eg_array[i].checked true;
        }
    }
    </script> 
    and in the same form :
    PHP Code:
    <input type='checkbox' onClick='checkAll();'>Select All 
    and this my orginial checkboxes .. in the PHP loop :
    PHP Code:
    echo "<input type='checkbox' name='eg_array[]' value='$a->id'>"

    when I click select all .. Down in the Bar I see " Error in the page "

    Thanks

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Next time open up the error box and tell us what it says.

    Code:
    document.getElementsByName("eg_array[]");
    should be
    Code:
    var eg_array = document.getElementsByName("eg_array[]");
    Firefox's JavaScript Console often gives more useful error messages than IE does.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for (var i=0; i< eg_array.length; i++)

    eg_array?? No such variable defined in your code, and undefined variables do not have a .length property.

  8. #8
    Passionate Web Developer Egyptechno's Avatar
    Join Date
    Jan 2004
    Location
    Dubai
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script language="Javascript">
    function EgCheck() {
    	var eg_array = document.getElementsByName("eg_array[]");
    	for (var i=0;  i< eg_array.length; i++) {
    			eg_array[i].checked = true;
    	}
    }
    </script>
    Thanks Too Much

    Worked 100%


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
  •