Results 1 to 4 of 4
  1. #1
    Join Date
    Jan 2002
    Location
    Ohio
    Posts
    3,155

    [Javascript] Check all checkboxes problems

    I'm working on a permissions system using checkboxes and found some code online and modified it slightly for my use. I'm not a javascript expert or anything and I dont understand what the script is doing.

    For the most part the script works correctly, but sometimes you have to click the "full" permissions box for it to take effect and toggle the related boxes. Its not a huge issue, but it could be quite annoying.

    Here is the javascript thats in use...
    Code:
    function togglePerms(gname){
        var checkboxes = document.getElementsByName(gname);
        var button = document.getElementById('toggle');
        if(button.value == 'select') {
            for (var i in checkboxes) {
                checkboxes[i].checked = 'FALSE';
            }
            button.value = 'deselect'
        } else {
            for (var i in checkboxes) {
                checkboxes[i].checked = '';
            }
            button.value = 'select';
        }
    }
    Here is the HTML... The variable inside togglePerms('admins'), is each row of data.
    Code:
                <td class="tablecat title" align="center">Admins</td>
                <td class="td_alt2" align="center"><input class="double" type="checkbox" name="admins" value="full" onClick="togglePerms('admins')" id="toggle"></td>
                <td class="td_alt2" align="center"><input class="double" type="checkbox" name="admins" value="view" checked ></td>
                <td class="td_alt2" align="center"><input class="double" type="checkbox" name="admins" value="add" checked ></td>
                <td class="td_alt2" align="center"><input class="double" type="checkbox" name="admins" value="edit" checked ></td>
                <td class="td_alt2" align="center"><input class="double" type="checkbox" name="admins" value="delete" checked ></td>
                <td class="td_alt2" align="left">None</td>
                <td class="td_alt2" align="center"></td>
    Live example:
    http://2thextreme.org/weathercms/test.html

    Thanks in advance for ideas and tips.
    Don't like what I say? Ignore me.

  2. #2
    Hi MGCJerry,

    Are you looking to do something else then what the script currently does?

    It does exactly what you think it is doing. It selects or deselects all of the check boxes in that row, when the "Full" check box is select or deselected.
    Morgan Klaif
    Business Manager / System Administrator / IT
    MorganKlaif28 [at] comcast [dot] net

  3. #3
    Join Date
    Sep 2014
    Location
    Oregon
    Posts
    33
    Quote Originally Posted by MGCJerry View Post
    I'm working on a permissions system using checkboxes and found some code online and modified it slightly for my use. I'm not a javascript expert or anything and I dont understand what the script is doing.

    For the most part the script works correctly, but sometimes you have to click the "full" permissions box for it to take effect and toggle the related boxes. Its not a huge issue, but it could be quite annoying.

    Here is the javascript thats in use...
    Code:
    function togglePerms(gname){
        var checkboxes = document.getElementsByName(gname);
        var button = document.getElementById('toggle');
        if(button.value == 'select') {
            for (var i in checkboxes) {
                checkboxes[i].checked = 'FALSE';
            }
            button.value = 'deselect'
        } else {
            for (var i in checkboxes) {
                checkboxes[i].checked = '';
            }
            button.value = 'select';
        }
    }
    Here is the HTML... The variable inside togglePerms('admins'), is each row of data.
    Code:
                <td class="tablecat title" align="center">Admins</td>
                <td class="td_alt2" align="center"><input class="double" type="checkbox" name="admins" value="full" onClick="togglePerms('admins')" id="toggle"></td>
                <td class="td_alt2" align="center"><input class="double" type="checkbox" name="admins" value="view" checked ></td>
                <td class="td_alt2" align="center"><input class="double" type="checkbox" name="admins" value="add" checked ></td>
                <td class="td_alt2" align="center"><input class="double" type="checkbox" name="admins" value="edit" checked ></td>
                <td class="td_alt2" align="center"><input class="double" type="checkbox" name="admins" value="delete" checked ></td>
                <td class="td_alt2" align="left">None</td>
                <td class="td_alt2" align="center"></td>
    Live example:
    http://2thextreme.org/weathercms/test.html

    Thanks in advance for ideas and tips.
    I agree with what is said above, it seems that this script does select all the inputs once you click full. If you would like to change this to automatically select all change where it says

    Code:
     <td class="td_alt2" align="center"><input class="double" type="checkbox" name="admins" value="full" onClick="togglePerms('admins')" id="toggle"></td>
    to

    Code:
     <td class="td_alt2" align="center"><input class="double" type="checkbox" name="admins" value="full" onLoad="togglePerms('admins')" id="toggle"></td>
    This however might cause issues because the javascript event is firing before the rest of the inputs are inserted. So lets take it a step further and add a timeout just for good measure.

    Code:
     <td class="td_alt2" align="center"><input class="double" type="checkbox" name="admins" value="full" onLoad="setTimeout=function(){togglePerms('admins');},300)" id="toggle"></td>
    This should fire the javascript event 1/3 of a second after this input element loads, this is untested so you might have to modify it slightly


    << Signature to be set up in profile >>
    Last edited by Postbox; 09-13-2014 at 05:11 AM.

  4. #4
    Quote Originally Posted by HostIntro View Post
    Hi MGCJerry,

    Are you looking to do something else then what the script currently does?

    It does exactly what you think it is doing. It selects or deselects all of the check boxes in that row, when the "Full" check box is select or deselected.
    I agree with HostIntro, I tried and tested the script and the behavior is exactly what is expected.

    Try using javascript frameworks like JQuery or MooTools for example, they can be a lot handy when it comes to doing simple functionality like this.
    EmailHosting.com
    http://www.emailhosting.com

Similar Threads

  1. javascript validation of checkboxes
    By szarwell in forum Programming Discussion
    Replies: 0
    Last Post: 11-09-2005, 03:10 PM
  2. Javascript: Check all checkboxes within a div element?
    By Pheaton in forum Programming Discussion
    Replies: 2
    Last Post: 07-21-2005, 06:03 PM
  3. javascript check all boxes
    By sikkhost in forum Programming Discussion
    Replies: 21
    Last Post: 05-25-2005, 07:01 PM
  4. help with javascript toggle all checkboxes code.
    By Nullified in forum Programming Discussion
    Replies: 8
    Last Post: 07-07-2004, 10:33 AM
  5. JavaScript help needed! (Involves textfields and checkboxes)
    By sachit64 in forum Programming Discussion
    Replies: 7
    Last Post: 11-17-2003, 02:55 PM

Posting Permissions

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