如何在PHP中实现"select/unselect all"复选框？

<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>

上面的代码显示了我可以使用谷歌云消息发送消息的用户列表。每个用户都显示在一个表中，每个用户都有一个复选框。我可以从表中选择用户向他们发送消息我想在此添加一个选择/取消选择复选框。有人能帮我吗？

提前感谢。

正如@Mex和@Lai所指出的，大多数人都使用Javascript来实现这一点。您可以使用纯Javascript方法，如@Lai的链接或jQuery（如果您碰巧使用的话）。

如果出于某种原因，您需要使用PHP进行此操作，那么您可能希望有一个"全选"复选框。传统上，它位于各个行复选框上方的表格标题中。

当有人提交表单时，您可以选中"全选"复选框，如果选中了该复选框，则可以像用户单独选中所有复选框一样处理表单。

试试这个，它的工作

<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>

相关内容

最新更新

热门标签：