Solved

Using JQuery to select all boxes

Posted on 2009-05-07
13
377 Views
Last Modified: 2012-05-06
I am trying to use JQuery to select all boxes in a row.  I'd like to be able to click on the select all box and have all select boxes checked on the page.  The following is all that I have due to my lackof knowledge on this topic with JQuery.

PHP/HTML

<?php
                                    if($_GET['center'] == "inbox") {
                                          $username = $_SESSION['username'];
                                          $getMessages = sprintf("SELECT id, subject, user_message, user_to, user_from, reply_to_id, date
                                                 FROM message_center
                                                 WHERE user_to='%s'
                                                 AND reply_to_id=0
                                                 ORDER BY date DESC", $username);
                                           $gotMessages = mysql_query($getMessages) or die("Didn't get messages because: " . mysql_error());
                                           
                                           echo "
                                                       <div class='email-options'>
                                                            <div class='email-options-text'>
                                                                  Select All: <input type='checkbox' class='check-all' />  <span id='delete'>Delete Selected</span>
                                                            </div>
                                                      </div>
                                                       ";
                                           
                                                 while($m = mysql_fetch_array($gotMessages)) {
                              ?>
                              <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
                                    <div class="email-inbox">
                                          <div class="email-select">
                                                <input type="checkbox" name="select" value="remove[<?= $m['id'] ?>]" />
                                          </div>
                                          <div class="email-from">
                                                <?= $m['user_from'] ?>
                                                      <div class="email-date">
                                                            <?= date("n/j/Y g:ia", strtotime($m['date'])) ?>
                                                      </div>
                                          </div>
                                          <div class="email-subject">
                                                <a href="/my-message-center.php?center=message&id=<?=$m['id']?>"><?= $m['subject'] ?></a>
                                                      <div class="email-short-message">
                                                            <a href="/my-message-center.php?center=message&id=<?=$m['id']?>"><?= (strlen($m['user_message']) > 30 ? substr($m['user_message'], 0, 30). "..." : $m['user_message']) ?></a>
                                                      </div>
                                          </div>
                                          <div class="spacer"></div>
                                    </div>
                              </form>

JQuery

$(document).ready(function() {
      $(".check-all").select(function() {
            $("#box").select();
      });
});
0
Comment
Question by:pingeyeg
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 4
13 Comments
 
LVL 1

Author Comment

by:pingeyeg
ID: 24324706
This is my second try at the JQuery, but it's not doing anything:

$(document).ready(function() {
      $(".check-all").select(function() {
            for(i=0; i<"#box[]".length; i++) {
                  $("#box[i]").select();
            }
      });
});
0
 
LVL 12

Accepted Solution

by:
alien109 earned 500 total points
ID: 24325004
$(document).ready(function() {
      $(".check-all").click(function() {
            $(":checkbox[class!=check-all]").attr("checked",$(this).attr("checked"));
      });
});

try that. should act as a toggle for select all/deselect all.
0
 
LVL 1

Author Comment

by:pingeyeg
ID: 24325035
Unfortunately, that is not doing anything.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:pingeyeg
ID: 24325061
I forgot that I added the id name to the checkbox, sorry:

<input type="checkbox" name="select" id="box[]" value="remove[<?= $m['id'] ?>]" />
0
 
LVL 12

Expert Comment

by:alien109
ID: 24325154
can you post your updated php/html then so I can modify it for your changes?
0
 
LVL 1

Author Comment

by:pingeyeg
ID: 24325168
<?php
                                    if($_GET['center'] == "inbox") {
                                          $username = $_SESSION['username'];
                                          $getMessages = sprintf("SELECT id, subject, user_message, user_to, user_from, reply_to_id, date
                                                 FROM message_center
                                                 WHERE user_to='%s'
                                                 AND reply_to_id=0
                                                 ORDER BY date DESC", $username);
                                           $gotMessages = mysql_query($getMessages) or die("Didn't get messages because: " . mysql_error());
                                           
                                           echo "
                                                       <div class='email-options'>
                                                            <div class='email-options-text'>
                                                                  Select All: <input type='checkbox' class='check-all' />  <span id='delete'>Delete Selected</span>
                                                            </div>
                                                      </div>
                                                       ";
                                           
                                                 while($m = mysql_fetch_array($gotMessages)) {
                              ?>
                              <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
                                    <div class="email-inbox">
                                          <div class="email-select">
                                                <input type="checkbox" id="box[]" name="select" value="remove[<?= $m['id'] ?>]" />
                                          </div>
                                          <div class="email-from">
                                                <?= $m['user_from'] ?>
                                                      <div class="email-date">
                                                            <?= date("n/j/Y g:ia", strtotime($m['date'])) ?>
                                                      </div>
                                          </div>
                                          <div class="email-subject">
                                                <a href="/my-message-center.php?center=message&id=<?=$m['id']?>"><?= $m['subject'] ?></a>
                                                      <div class="email-short-message">
                                                            <a href="/my-message-center.php?center=message&id=<?=$m['id']?>"><?= (strlen($m['user_message']) > 30 ? substr($m['user_message'], 0, 30). "..." : $m['user_message']) ?></a>
                                                      </div>
                                          </div>
                                          <div class="spacer"></div>
                                    </div>
                              </form>
0
 
LVL 12

Expert Comment

by:alien109
ID: 24325245
You must have something else going on.

The following code (which is a simplified version of the checkfields) works just fine

<!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">
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
      $(".check-all").click(function() {
            $(":checkbox[class!=check-all]").attr("checked",$(this).attr("checked"))
      });
});

</script>
</head>
<body>

<div class='email-options'>
      <div class='email-options-text'>
              Select All: <input type='checkbox' class='check-all' />  <span id='delete'>Delete Selected</span>
      </div>
</div>

<form action="" method="post">
      <input type="checkbox" id="box[]" name="select" value="remove[<?= $m['id'] ?>]" />
      <input type="checkbox" id="box[]" name="select" value="remove[<?= $m['id'] ?>]" />
      <input type="checkbox" id="box[]" name="select" value="remove[<?= $m['id'] ?>]" />
      <input type="checkbox" id="box[]" name="select" value="remove[<?= $m['id'] ?>]" />
      <input type="checkbox" id="box[]" name="select" value="remove[<?= $m['id'] ?>]" />
      <input type="checkbox" id="box[]" name="select" value="remove[<?= $m['id'] ?>]" />
      <input type="checkbox" id="box[]" name="select" value="remove[<?= $m['id'] ?>]" />
      <input type="checkbox" id="box[]" name="select" value="remove[<?= $m['id'] ?>]" />
</form>
</body>
</html>

Just as a side note - If you gave all of the checkboxes
<input type="checkbox" id="box[]" name="select" value="remove[<?= $m['id'] ?>]" />

a class that is different from the select all checkbox - it would make selecting everything much easier.
0
 
LVL 1

Author Comment

by:pingeyeg
ID: 24335156
I'm not sure I follow you on your last statement.  My checkboxes inside of my while statement all have the class="box[]" name, which is different from the class="check-all" name.
0
 
LVL 1

Author Comment

by:pingeyeg
ID: 24335178
Can you show me where you have this working?
0
 
LVL 1

Author Comment

by:pingeyeg
ID: 24335190
Ok, nevermind.  I wasn't using the latest version of JQuery so that's why it wasn't working.  It works now.
0
 
LVL 12

Expert Comment

by:alien109
ID: 24335240
Excellent. Just FYI - using the brackets [] in you class name won't work real well with with jQuery since they get interpreted as part of an expression rather than the class name.

for example - if you look at the selector above:
$(":checkbox[class!=check-all]")

This is saying - select all checkboxes where the class name != "check-all". So having "[" or "]" will end up getting evaluated as part of an expression, not the name itself.
0
 
LVL 1

Author Comment

by:pingeyeg
ID: 24335479
Ok, makes a lot of sense.  I was wondering what how that read.

Now my only issue is getting all messages to delete correctly using the select all method.  Right now only the first message gets deleted.
0
 
LVL 1

Author Comment

by:pingeyeg
ID: 24335496
Actually, I just realized only the first question gets removed no matter which question I select to delete.
0

Featured Post

Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question