Select All checkbox

ippo · 06-16-2012, 03:25 AM

Is it possible to create a "Select All" check-box in a PHP program without using Javascript?

ippo · 06-16-2012, 11:20 AM

I didn't get what you said.Can you please write the code?

p.s.: What I mean is that I want to create 5 check-boxes beside 5 files . Then there show be another checkbox below the 5 files called "Select All" ,which on being selected ,selects /checks all the 5 check boxes beside the 5 files respectively. Hope you all get me now.

dan-dan · 06-16-2012, 12:09 PM

Though I wouldn't advise it, this will toggle five checkboxes using just PHP. I really think you should use javascript. I used a button as the submit, used CSS to destyle it and wrapped it around another checkbox.

Edited

PHP Code:


			
<?php

if (isset($_POST['checkAll'])) {
    if (empty($_POST['items'])) 
        $checked = true;
}

?>        

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>TEST</title>

<style type="text/css">
form span {
    display: inline-block;
    width: 80px;
}
    
#submit {
    border: 0;
    background: none;
    padding: 0;
    position: relative;
    right: 3px;
}    
    
</style>    
</head>

<body>
    <form method="post" action="">
        <div>
            <span>file1.php</span> <input type="checkbox" value="item1" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?>  />
        </div>
        <div>
            <span>file2.php</span> <input type="checkbox" value="item2" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> /
        </div>
        <div>
            <span>file3.php</span> <input type="checkbox" value="item3" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> /
        </div>
        <div>
            <span>file4.php</span> <input type="checkbox" value="item4" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> />
        </div>
        <div>
            <span>file5.php</span> <input type="checkbox" value="item5" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> />
        </div>
        <span>Select all</span>
        <button type="submit" id="submit" name="checkAll"><input type="checkbox" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> /></button> 
        
    </form>
</body>

</html>

dan-dan · 06-16-2012, 12:18 PM

Only tried it in FF actually.

Quote:

Originally Posted by iBall

It works in FF12 but not in my IE9.

dan-dan · 06-16-2012, 12:20 PM

Also works in Chrome, though in Opera it won't even show the submit checkbox. Hmmm.

dan-dan · 06-16-2012, 12:27 PM

I wonder whether styling the submit button to look like a checkbox would fix it in IE and Opera.

Anyways, it's pub time!

firepages · 06-16-2012, 12:46 PM

if you just use a standard button instead of a checkbox the code works fine as is...

Code:

        <input type="submit" id="submit" name="checkAll" value="<?php echo isset($checked) ? 'check all' : 'uncheck all' ; ?>">

ippo · 06-16-2012, 01:07 PM

Many thanks @Dan-Dan.You are just great!!
1)The most amazing thing I found in your code is how you changed a submit button to a checkbox!!
I am still reeling over these lines of codes-

PHP Code:


			
<button type="submit" id="submit" name="checkAll"><input type="checkbox" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> /></button>

I have not seen yet a submit button tag getting closed by </button>!! Is that a right syntax?
2)2ndly,how does the submit button getting morphed into a checkbox??
3)3rdly,what is this code checking??-

PHP Code:


			
<?php echo isset($checked) ? 'checked="checked"' : '' ; ?>

Also,I dont get why you used the

PHP Code:


			
empty($_POST['items']

in the 4th line?
Can you just give a short explanation what this

PHP Code:


			
if (empty($_POST['items'])) 
        $checked = true;

code does?
4)Also,you have given the names of all the input check-boxes as items[],then how and what are the names being stored in there?Are they assigned arbitrary names like file1.php,file2.php etc?? How are the names getting assigned automatically without being hard coded?Can you just give an example of what the items array possibly contains?

Actually so far I was used to giving names to input boxes manually ,but here you used a items[] array & I have never used this type of array assignment myself.
Please...if you are kind enough to give some explanations the above confusions,will be greatly obliged.

p.s.: I am still a noob after so many days trying to learn PHP MySQL.

I am in the middle of the ocean who has forgotten swimming . Am so confused OMG please excuse me.

Nile · 06-16-2012, 01:43 PM

1) It's not really valid. You aren't supposed an input nested inside a button element

2) It becomes "morphed" because the checkbox is in the submit button.

3) That code says "if the variable $checked is an actual variable, print check="checked", otherwise print nothing.
Syntax for shorthand-ifs:

Code:

return (condition) ? statementTrue : statementFalse;

If condition then statementTrue, otherwise statementFalse.

4) All of the checkboxes are given the name of "items[]". What this does is, when the page is submitted and php processes it, creates an array of all the checkboxes automatically. That line of code (the "empty($_POST['....") simply checks to see if the array of sent items is empty (I.E., if none of the checkboxes were checked).

5) The input names of items[] is processed by php like this:

Code:

<input type="checkbox" name="items[]"> // $_POST['items'][0]
<input type="checkbox" name="items[]"> // $_POST['items'][1]
<input type="checkbox" name="items[]"> // $_POST['items'][2]

ippo · 06-16-2012, 01:56 PM

But when I click on the "Select All" check box ,how are all the check boxes getting checked/selected?
Can you please explain the flow of program logic pleasee?

I cant understand ,when $checked is true then what happens sequentially?

I cant understand at all that, if $checked is true, how do the check boxes get checked??
What I am doing is first I am checking the "select all" checkbox MANUALLY then what happens?
@Nile,Your explanation was not very clear . You said

Code:

checked=checked

is printing it !! where is it printing??
I know already

Code:

return (condition) ? statementTrue : statementFalse;

but that is not my doubt.My doubt is how do all boxes get checked when I check the "Select all ' check box?
Hope you got me this time!

Nile · 06-16-2012, 02:07 PM

When you click on the "Select All" input, it appears to the user as if (s)he's only clicking on the checkbox, but in actuality, the user is clicking on both the checkbox and the submit button due to the fact that events apply to every child element of the applied element. When this happens, the form is submitted (by the invisible submit button) by a button with a name of checkAll. When the page reloads, it checks to see if the $_POST['checkAll'] postdata is sent, which it is. Afterwards, it checks to see if any of the checkboxes are checked. If none of them are, the script sets a variable called $checked and gives it a boolean value of true. Scrolling down in the code, using that short-if I showed you in my previous code, if $checked is true, it places checked="checked" in the html causing the result you see.

(if that doesnt make sense, try reading the following: )
So, responding to your edited post:

When $checked is true (the highlighted), it displays the second highlighted, which is the html to make a checkbox appear and valued as checked:

Code:

<input type="checkbox" value="item5" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> />

And it repeats this for every checkbox that needs to be checked when $checked is true.

But remember: This only happens when there is postdata. If you want to see this in action to understand it better using getdata, change the following highlighted to "get" instead of "post":

Code:

<form method="post" action="">

And in the php change the highlighted to _GET (_POST to _GET):

Code:

<?php

if (isset($_POST['checkAll'])) {
    if (empty($_POST['items'])) 
        $checked = true;
}

?>

This will allow you to view the page source and understand where the php is setting the checkbox to checked. In fact, once you've changed the code to get, you can just visit the page like this: page.php?checkAll, and you should be able to actually see in the code what I'm talking about.

The difference between GET and POST data is that get is sent in the URL while post is sent in the headers. For example, the page I'm on right now says "http://www.codingforums.com/showthread.php?t=265185&page=2", and I can easily change the variables in the URL getting me a different page. However, with post, the variables being sent are not visible to the operator because they are in the headers of the page. You can read about http headers here: http://en.wikipedia.org/wiki/List_of_HTTP_header_fields (just a little real life example: if you've ever filled out a form on a website then pressed the BACK button, you may notice some funky message about resending the post data. this is because when you go back using post data, the variables you send are handled behind the scenes where when you press the BACK button, its unclear to the browser if you want to keep those variables or dump them as opposed to get where the variables are in the url and the browser doesnt need to worry about them as much)

ippo · 06-16-2012, 02:35 PM

Firstly,
I am trying "http://localhost/foldername/Image Upload/select all_chkbox.php?checkAll" as the URL,but nothing happens!!

2)You said

Quote:

It becomes "morphed" because the checkbox is in the submit button.

but merely wrapping the checkbox in the submit button doesn't morph it as the following code I tried didnt do the trick!!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title> New Document </title>
<STYLE>
form span {
    display: inline-block;
    width: 80px;
}

#submit {
    border: 0;
    background: none;
    padding: 0;
    position: relative;
    right: 3px;
}    
</STYLE>
</head>

<body>
<form method=post action="">
<SPAN>SELECT ALL</SPAN> <input type="submit" id="submit" name="all"><input type="checkbox" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?>/></button>
</form>
</body>
</html>

It needs more spice to change the submit button to a checkbox!! lol

Nile · 06-16-2012, 02:43 PM

I'm not sure what the morphed effect you're referring to is. I ran the code and simply got a checkbox that was inside an invisible button. In fact, in Safari, this doesn't even work. Clicking on a checkbox inside a button won't submit the the form, it'll just check the box.

Your code should in whole look like this:

Code:

<?php

if (isset($_GET['checkAll'])) {
	if (empty($_GET['items'])) 
		$checked = true;
}

?>        

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>TEST</title>

<style type="text/css">
form span {
	display: inline-block;
	width: 80px;
}

#submit {
	border: 0;
	background: none;
	padding: 0;
	position: relative;
	right: 3px;
}    

</style>    
</head>

<body>
	<form method="get" action="">
		<div>
			<span>file1.php</span> <input type="checkbox" value="item1" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?>  />
		</div>
		<div>
			<span>file2.php</span> <input type="checkbox" value="item2" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> /
		</div>
		<div>
			<span>file3.php</span> <input type="checkbox" value="item3" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> /
		</div>
		<div>
			<span>file4.php</span> <input type="checkbox" value="item4" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> />
		</div>
		<div>
			<span>file5.php</span> <input type="checkbox" value="item5" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> />
		</div>
		<span>Select all</span>
		<button type="submit" id="submit" name="checkAll"><input type="checkbox" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> /></button> 

	</form>
</body>

</html>

And you should be able to go to ?checkAll and have all of the checkboxes check.

ippo · 06-16-2012, 03:16 PM

But is there any tag called <button> tag? So long I forgot to notice but I used a

Code:

<input type="submit">

instead of

Code:

<input type="button">

.
But is there any tag called <button>?? I never learnt this in my HTML class!!

Nile · 06-16-2012, 03:23 PM

Yes - the <button> element isn't really used that often but enables html to render inside of it.

Writing out:

Code:

<input type="button">

is equivalent to

Code:

<button></button>

Although it's better practice to just use the <input type="...">. Placing HTML inside the <button> tag and expect it to submit when pressing the html inside doesn't work in Safari, so I would highly suggest Javascript for this whole procedure.