Solved

Using JQuery to select all boxes

Posted on 2009-05-07
13
373 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
  • 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
 
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

895 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now