Solved

Using JQuery to select all boxes

Posted on 2009-05-07
13
376 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to count occurrences of each item in an array.
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)

739 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