Solved

Using JQuery to select all boxes

Posted on 2009-05-07
13
370 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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

744 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