select all function not working

Question

I'm trying to create a select all button using js on a bunch of checkboxes that are generated by a foreach function.

This is what the script for the select all/deselect all functions end up being:

<script>
     function selectAll() {
            document.getElementById('abbsmalone_select').checked = true; 
            document.getElementById('cchkorea_select').checked = true; 
            document.getElementById('amygrant_select').checked = true; 
            document.getElementById('long_select').checked = true; 
                }
    </script>
    <script>
     function deselectAll() {
            document.getElementById('abbsmalone_select').checked = false; 
            document.getElementById('cchkorea_select').checked = false; 
            document.getElementById('amygrant_select').checked = false; 
            document.getElementById('long_select').checked = false; 
                }
    </script>

Here's the actual PHP script to create the functions:

<script>
     function selectAll() {
<?PHP 
        get_friends_select();
        foreach ($_SESSION['friends'] as $friend) {
            echo "document.getElementById('" . $friend . "_select').checked = true; 
            ";
        }
?>
    }
    </script>
    <script>
     function deselectAll() {
<?PHP 
        get_friends_select();
        foreach ($_SESSION['friends'] as $friend) {
            echo "document.getElementById('" . $friend . "_select').checked = false; 
            ";
        }
?>
    }
    </script>

Here's the code for the buttons:

<input name="deselect_all" type="button" class="form_button2" onclick="deselectAll()" value="select all" style="float: left;">
<input name="select_all" type="button" class="form_button2" onclick="selectAll()" value="deselect all" style="float: left;">

Neither button works. Can you not do it this way? Or is my code wrong? :-/

UPDATE:

As suggested, I tried the following but it's still not working.

<input type="checkbox" class="friend_select" name="abbsmalone_select"  id="abbsmalone_select" value="yes" checked='checked' style="display: none;">

function selectAll() {
        jQuery(".friend_select").prop('checked', true);
    }

    function deselectAll() {
        jQuery(".friend_select").prop('checked', false);
    }

function must be called using braces. So it is deselectAll() and not deselectAll — Keerthi, Jul 01 '15 at 16:23
@Jay Blanchard: This is a valid means of mixing PHP and Javascript. The OP is using PHP to build a series of operations within a Javascript function. — Jerbot, Jul 01 '15 at 16:31
What you have here is a bit cumbersome. I see what you're trying to do. This should be able to be accomplished using only Javascript, though it's difficult to suggest a solution without seeing the HTML containing the checkboxes. The [jquery](https://jquery.com/) library might be recommended, as it streamlines many of these types of operations. — Jerbot, Jul 01 '15 at 16:35
@Jay Blanchard: Without taking the time to copy this into a test environment, I'd say it's real close to working, but at the very least requires Keerthi's suggestion. Yes, it's ugly, yes it's difficult to maintain, but it appears to be a workable idea, and also a stepping stone for a programmer learning web programming. — Jerbot, Jul 01 '15 at 16:39
What exactly do you mean by "difficult to maintain"? I'm curious. BTW, there actually is () after the function name, I just took them out to see if maybe that would make it work. On my page it actually has the (). — thinkofacard, Jul 01 '15 at 16:42
I'll have to agree with the "stepping stone" statement @SuperJer, but I want to point out to the OP a more proper and easily maintainable method would be. — Jay Blanchard, Jul 01 '15 at 16:43
@thinkofacard: Maintainability heavily relies on 3 things: 1) Being able to determine what a piece of code does without extensive scrutiny (let's face it, it's easy to forget how a particular block works sometimes as soon as an hour after it's written) 2) Ease of alteration if any of a number of requirements change, and 3) Reusability. I'd say your method is passable on 1), but lacks in 2) and 3). — Jerbot, Jul 01 '15 at 16:48
Your script, because of the way it is formed, would require editing the PHP to make any changes to your JS. If you keep your JS separate you can modify it alone, without having to touch any other code. HTML, CSS, JavaScript, etc. should all be kept as separate as possible. — Jay Blanchard, Jul 01 '15 at 16:48
Excellent lesson, thanks for clarifying. I'm trying to use a better method. I like the idea of using the same class on all the inputs. Still doesn't seem to be working though. I updated the question. — thinkofacard, Jul 01 '15 at 16:52

score 1 · Answer 1 · edited May 23 '17 at 12:07

I would recommend a different approach. Outputing JavaScript with PHP is not a good idea since the code is very hard to understand and maintain.

Instead, add a class to all the checkboxes, so you get something like this:

<input type="checkbox" class="friend" id="abbsmalone_select" />
<input type="checkbox" class="friend" id="cchkorea_select" />
...

Then you can do the JavaScript with a few lines of jQuery, no PHP involved. (I'm sure it can be done without jQuery as well, but once you've started to use it you will get so used to it you forget how to write JavaScript without it...)

function selectAll() {
    jQuery(".friend").prop('checked', true);
}

function deselectAll() {
    jQuery(".friend").prop('checked', false);
}

Then you need to run some JavaScript to register the click events:

jQuery(function() {
    //This code is run when the document has loaded.
    jQuery("#deselect_all").click(deselectAll);
    jQuery("#select_all").click(selectAll);
});

Now you can remove the onclick from the buttons. I also changed the name tag to an id tag, but if you want to keep it as name you can just change the "#deselect_all" above to "[name='deselect_all']". So the code for the buttons is:

<input name="deselect_all" type="button" class="form_button2" value="deselect all" style="float: left;">
<input name="select_all" type="button" class="form_button2"  value="select all" style="float: left;">

Here is a working JSFiddle.

Doing it without jQuery

I would recommend to look at this question about getElementByClass().

The OP is using Vanilla JS, so answering the question with jQuery is good, but not quite what the OP may need. Since you assumed jQuery why would you go with inline JS in a `onclick`? For that metter, why would you go with inline JS at all when you could easily capture the click event with VanillaJS? — Jay Blanchard, Jul 01 '15 at 16:41
This is a good idea. It doesn't seem to be working. I do have jquery in the header. I'll update the original question with what I did so you can see. — thinkofacard, Jul 01 '15 at 16:48
I also tried document.getElementsByClassName("friend_select").checked = true; instead of using jquery and that didn't work either. — thinkofacard, Jul 01 '15 at 16:57

Jay Blanchard · Answer 2 · 2015-07-01T17:16:18.137

1

All jQuery Example

If you want to use jQuery may I suggest separating the code? First create a file to hold only the jQuery / JavaScript

jQuery - (functions.js)

$(function() {

    function selectAll() {
        $('.selections').prop('checked', true);
    }
    function deselectAll() {
        $('.selections').prop('checked', true);    
    }

    $(document).on('click', 'input[name="select_all"]', function(){
        selectAll();
    });
    $(document).on('click', 'input[name="deselect_all"]', function(){
        deselectAll();
    });
});

Here the the code assumes items have a class added (selections) to them to make their selection as a group easier. If I need to add more checkboxes all I have to do is modify the HTML making sure the new checkboxes have the class needed without having to modify the JS.

We're able to select the buttons based on already existing information in the markup and the code is easily readable and makes sense. If need be, you can place additional functionality in the code for each button. You could also modify this to use just one button, changing the function of the button based on its current state.

HTML

After the script where you include jQuery you have to include the jQuery/JavaScript file you created -

<script src="functions.js"></script>

Here are your buttons with the inline JavaScript removed. -

<input name="select_all" type="button" class="form_button2" value="select all" style="float: left;">
<input name="deselect_all" type="button" class="form_button2" value="deselect all" style="float: left;">

Here are your checkboxes with the selections class added -

<input name="abbsmalone_select" class="selections" type="checkbox" />
<input name="cchkorea_select" class="selections" type="checkbox" />
<input name="amygrant_select" class="selections" type="checkbox" />
<input name="long_select" class="selections" type="checkbox" />

No PHP was harmed in the making of these scripts.

edited Jul 01 '15 at 17:16

answered Jul 01 '15 at 17:00

Jay Blanchard

34,243
16
77
119

It doesn't seem to be working for me. Here's a pastebin of my page http://pastebin.com/NR0rv4Ck lines 284 to 292 are the function, 317-318 are the buttons, line 322 is the checkbox input – thinkofacard Jul 01 '15 at 17:16
Are you getting any errors in your console? I see right off of the bat that you're including two different versions of jQuery. – Jay Blanchard Jul 01 '15 at 17:20
No errors. Where are the two different versions? In the header? – thinkofacard Jul 01 '15 at 17:23
One is at the top, one at the bottom. – Jay Blanchard Jul 01 '15 at 17:28
ah, okay I got rid of the one in the footer. Still isn't working though. :( – thinkofacard Jul 01 '15 at 17:31
I cannot run it on my server because I am missing too many of the included files and I cannot trigger the modal to pop-up. – Jay Blanchard Jul 01 '15 at 17:39
As soon as I clicked I got this error - `ReferenceError: deselectAll is not defined` You left the inline JS on the buttons – Jay Blanchard Jul 01 '15 at 17:45
`"NetworkError: 404 Not Found - http://prayerpond.com/functions.js"` You do not have to use this if you didn't create the code separate from the markup. – Jay Blanchard Jul 01 '15 at 17:52
I didn't think so, but it wasn't working so I tried putting it on there. lol It's off now. – thinkofacard Jul 01 '15 at 17:53
I simplified the file for you to get as rid of as much irrelevant code as possible – thinkofacard Jul 01 '15 at 18:01
Can you move the script inside of the `` tags. Just make sure it is after the jQuery is included. – Jay Blanchard Jul 01 '15 at 18:01
Okay it should be there now – thinkofacard Jul 01 '15 at 18:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/82123/discussion-between-jay-blanchard-and-thinkofacard). – Jay Blanchard Jul 01 '15 at 18:14
Ah, I think the problem is that it might be "checking" it but it's not changing the background color (and font color). So, the function somehow needs to also change those elements on all the divs. That might not be possible is it? – thinkofacard Jul 01 '15 at 18:14

score 0 · Answer 3 · answered Jul 01 '15 at 16:59

Working example!

function selectAll() {
            document.getElementById('abbsmalone_select').checked = true; 
            document.getElementById('cchkorea_select').checked = true; 
            document.getElementById('amygrant_select').checked = true; 
            document.getElementById('long_select').checked = true; 
                }

     function deselectAll() {
            document.getElementById('abbsmalone_select').checked = false; 
            document.getElementById('cchkorea_select').checked = false; 
            document.getElementById('amygrant_select').checked = false; 
            document.getElementById('long_select').checked = false; 
                }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="friend_select" name="abbsmalone_select"  id="abbsmalone_select" value="yes" checked='checked' >
<input type="checkbox" class="friend_select" name="cchkorea_select"  id="cchkorea_select" value="yes" checked='checked' >
<input type="checkbox" class="friend_select" name="amygrant_select"  id="amygrant_select" value="yes" checked='checked' >
<input type="checkbox" class="friend_select" name="long_select"  id="long_select" value="yes" checked='checked' >




<input name="deselect_all" type="button" class="form_button2" onclick="selectAll()" value="select all" style="float: left;">
<input name="select_all" type="button" class="form_button2" onclick="deselectAll()" value="deselect all" style="float: left;">

I'm not noticing the difference between this and what I had. Am I missing something? — thinkofacard, Jul 01 '15 at 17:27

select all function not working

3 Answers3