Using JQuery to select all boxes

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();
      });
});
LVL 1
pingeyegAsked:
Who is Participating?
 
alien109Connect With a Mentor Commented:
$(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
 
pingeyegAuthor Commented:
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
 
pingeyegAuthor Commented:
Unfortunately, that is not doing anything.
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
pingeyegAuthor Commented:
I forgot that I added the id name to the checkbox, sorry:

<input type="checkbox" name="select" id="box[]" value="remove[<?= $m['id'] ?>]" />
0
 
alien109Commented:
can you post your updated php/html then so I can modify it for your changes?
0
 
pingeyegAuthor Commented:
<?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
 
alien109Commented:
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
 
pingeyegAuthor Commented:
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
 
pingeyegAuthor Commented:
Can you show me where you have this working?
0
 
pingeyegAuthor Commented:
Ok, nevermind.  I wasn't using the latest version of JQuery so that's why it wasn't working.  It works now.
0
 
alien109Commented:
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
 
pingeyegAuthor Commented:
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
 
pingeyegAuthor Commented:
Actually, I just realized only the first question gets removed no matter which question I select to delete.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.