<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>
&#13;
上面的代码显示了我可以使用Google云消息传递消息的用户列表。 每个用户都显示在一个表格中,每个用户都有一个复选框。 我可以从表中选择用户向他们发送消息 我想为此添加一个选择/取消选中复选框。 有人能帮助我吗?
先谢谢。
答案 0 :(得分:0)
正如@Mex和@Lai所说,大多数人都使用Javascript。你可以在@Lai的链接或jQuery中使用纯Javascript方法,如果你碰巧使用它。
如果出于某种原因需要使用PHP,则可能需要“全选”复选框。传统上,这是在单个行复选框上方的表头中。
当有人提交表单时,您可以选中“全选”复选框,如果选中,则处理表单,就像用户已单独选中所有复选框一样。
答案 1 :(得分:0)
试试这个,这是工作
<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>