stackoom
  简体   繁体   中英

how to implement “select/unselect all” checkbox in php?

 原文  2015-02-08 15:30:37  1   2    php/ html

Question

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>View Users</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <style> body { font: normal medium/1.4 sans-serif; } div.greetblock, div.serverresponse { border-collapse: collapse; width: 100%; margin-left: auto; margin-right: auto; align: center; } tr > td { padding: 0.25rem; text-align: center; border: 1px solid #ccc; } tr:nth-child(even) { background: #fff; } tr:nth-child(odd) { background: #FA9A8B; color: #fff; } tr#header{ background: #F78371; } div#norecord{ margin-top:10px; width: 15%; margin-left: auto; margin-right: auto; } input,select{ cursor: pointer; } img{ margin-top: 10px; height: 200px; width: 300px; } select{ width: 200px } div.leftdiv{ width: 100%; padding: 0 10px; float: center; border: 1px solid #ccc; margin: 5px; height: 320px; text-align:center; } div.rightdiv{ width: 45%; padding: 0 10px; float: right; border: 1px solid #ccc; margin: 5px; height: 320px; text-align:center; } hidediv{ display: none; } p.header{ height: 40px; background-color: #EB5038; padding: 10px; color: #fff; text-align:center; margin: 0; margin-bottom: 10px; } textarea{ font-size: 25px; font-weight: normal; } </style> <script> function sendMsg(){ var msgLength = $.trim($("textarea").val()).length; var checkedCB = $("input[type='checkbox']:checked").length; if( checkedCB == 0){ alert("You must select atleast one User to send message"); }else if(msgLength == 0){ alert("You left the message field blank, please fill it"); }else{ var formData = $(".wrapper").find("input").serialize() + "&imgurl="+ $("#festival").val() + "&message=" + $("textarea").val(); $.ajax({type: "POST",data: formData, url: "processmessage.php", success:function(res){ $(".greetblock").slideUp(1000); $(".serverresponse").prepend(res).hide().fadeIn(2000); }}); } } $(function(){ $(".serverresponse").hide() $("input[type='checkbox']").click(function(){ if($(this).is(':checked')){ $(this).parent().css("border","3px solid red"); }else{ $(this).parent().css("border","0px"); } }); $("div.leftdiv, div.rightdiv").hover(function(){ $(this).css("background","#FAFAFA"); },function(){ $(this).css("background","#fff"); }); $("#festival").change(function(){ $("img").attr("src",$(this).val()); }); $("#sendmsg").click(function(){ $(".serverresponse").fadeOut(300,function(){ $(".greetblock").fadeIn(1000); }); }); }); </script> </head> <body> <?php include_once 'db_functions.php'; $db = new DB_Functions(); $users = $db->getAllUsers(); if ($users != false) $no_of_users = mysql_num_rows($users); else $no_of_users = 0; ?> <?php if ($no_of_users > 0) { ?> <div class="greetblock"> <div class="leftdiv"> <p class="header">Select Users to whom you want to send an announcement </p> <table style="width:100%"> <tr id="header"><td>Id</td><td>EmailId</td><td>Send Message?</td></tr> <?php while ($row = mysql_fetch_array($users)) { ?> <tr> <td><span><?php echo $row["id"] ?></span></td> <td><span><?php echo $row["emailid"] ?></span></td> <td><span class="wrapper"><input type="checkbox" name="sendmsg[]" value="<?php echo $row["emailid"] ?>"/></span></td> </tr> <?php } ?> </table> </div> <div class="leftdiv"> <p class="header">Type your message </p> <textarea cols="15" rows="5" value="txtarea"> </textarea> <center> <button onclick="sendMsg()">Send Message</button> </center> </div> </div> <div class="serverresponse hidediv"> <center><button id="sendmsg">Send Message Again</button></center> </div> <?php }else{ ?> <div id="norecord"> No records in MySQL DB </div> <?php } ?> </body> </html>

The above code shows a list of users to whom i can send a message using google cloud messaging. Each user is shown in a table with a checkbox for each. I can select the users out the the table to send them a message I want to add a select/unselect check box to this. can someone help me?

Thanks in Advance.

2 answers

solution1
 0  2015-02-08 18:43:37

As @Mex and @Lai note, most people use Javascript for this. You can use a pure Javascript approach as in @Lai's link or jQuery if you happen to be using that.

If, for some reason, you need to use PHP for this, you would probably want to have a "Select All" checkbox. Traditionally, this is in the table header above the individual row checkboxes.

When someone submits the form, you can check the "Select All" checkbox and, if it is checked, handle the form as if the user had checked all of the checkboxes individually.

solution2
 0  2016-02-09 09:37:42

try this, it's work 

<html>
<head><title>View Users</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
  font: normal medium/1.4 sans-serif;
}
div.greetblock, div.serverresponse {
  border-collapse: collapse;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  align: center;
}
tr > td {
  padding: 0.25rem;
  text-align: center;
  border: 1px solid #ccc;
}
tr:nth-child(even) {
  background: #fff;

}
tr:nth-child(odd) {
  background: #FA9A8B;
  color: #fff;
}
tr#header{
background: #F78371;
}

div#norecord{
margin-top:10px;
width: 15%;
margin-left: auto;
margin-right: auto;
}
input,select{
cursor: pointer;
}
img{
margin-top: 10px;
height: 200px;
width: 300px;
}
select{
width: 200px
}
div.leftdiv{
width: 45%;
padding: 0 10px;
float: left;
border: 1px solid #ccc;
margin: 5px;
height: 320px;
text-align:center;
}
div.rightdiv{
width: 45%;
padding: 0 10px;
float: right;
border: 1px solid #ccc;
margin: 5px;
height: 320px;
text-align:center;
}
hidediv{
display: none;
}
p.header{
height: 40px;
background-color: #EB5038;
padding: 10px;
color: #fff;
text-align:center;
margin: 0;
margin-bottom: 10px;
}
textarea{
font-size: 25px;
font-weight: bold;
}

</style>
<script>

function sendMsg(){
var msgLength = $.trim($("textarea").val()).length;
var checkedCB = $("input[type='checkbox']:checked").length;
if( checkedCB == 0){
    alert("You must select atleast one User to send message");
}else if(msgLength == 0){
    alert("You left the message field blank, please fill it");
}else{
    var formData = $(".wrapper").find("input").serialize() + "&imgurl="+ $("#festival").val() + "&message=" + $("textarea").val();  
    $.ajax({type: "POST",data: formData, url: "processmessage.php", success:function(res){
        $(".greetblock").slideUp(1000);
        $(".serverresponse").prepend(res).hide().fadeIn(2000);
    }});
}
}

$(function(){
    $(".serverresponse").hide()
    $("input[type='checkbox']").click(function(){
        if($(this).is(':checked')){

        }else{

            $(this).parent().css("border","0px");
        }
    });

$("#select_all").click(function(){
      var checked_status = this.checked;
      $("input[name='sendmsg[]']").each(function(){
        this.checked = checked_status;
      });
    });


    $("div.leftdiv, div.rightdiv").hover(function(){
        $(this).css("background","#FAFAFA");
    },function(){
        $(this).css("background","#fff");
    });

    $("#festival").change(function(){
        $("img").attr("src",$(this).val());
    });

    $("#sendmsg").click(function(){
        $(".serverresponse").fadeOut(300,function(){
            $(".greetblock").fadeIn(1000);
        });     
    });
});
</script>
</head>
<body>
<?php
    include_once 'db_functions.php';
    $db = new DB_Functions();
    $users = $db->getAllUsers();
    if ($users != false)
        $no_of_users = mysql_num_rows($users);
    else
        $no_of_users = 0;   
?>
<?php
    if ($no_of_users > 0) {
?>

<div class="greetblock">
<div class="leftdiv">
<p class="header">Select Users to send message
</p>

<td><input type="checkbox" id="select_all"/>Select All</td>
<table>
<tr id="header"><td>Id</td><td>EmailId</td><td>Send Message?</td></tr>
<?php
    while ($row = mysql_fetch_array($users)) {
?> 
<tr>

<td><span><?php echo $row["id"] ?></span></td>
<td><span><?php echo $row["phones"] ?></span></td>
<td><span class="wrapper"><input type="checkbox" name="sendmsg[]" id="chk" value="<?php echo $row["phones"] ?>"/></span></td>
</tr>
<?php } ?>

</table>
</div>
<div class="rightdiv">
<p class="header">Type your message
</p>
<textarea cols="15" rows="5" value="txtarea">
</textarea>
<br/>

<center>
<button onclick="sendMsg()">Send Message</button>
</center>
</div>

</div>
<div class="serverresponse hidediv">
<center><button id="sendmsg">Send Message Again</button></center>
</div>
<?php }else{ ?>
<div id="norecord">
No records in MySQL DB
</div>
<?php } ?>

</body>
</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question checkbox toggle select all/unselect all problem How to select/unselect generated checkbox rows with a separate checkbox in header Checkbox Select all php javascript JavaScript & PHP checkbox select all How do you find out dynamically created checkbox is select/unselect in data grid component in flex? Select/Unselect all checkboxes of list of Branches PHP / HTML select and unselect links to change URL PHP- Select all based on checkbox How to implement “ show sub-checkbox” in php? how to fix “Successfully Added” message when the form aren't select all checkbox using php javascript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM