根据数据库值显示选中和未选中的复选框数的最佳方法
Best way to display number of check-boxes checked and unchecked based on database value
我在一个页面中有 50 个复选框，假设这个页面被医生用来管理他的病人数据，所以有些复选框可以选中，有些可以取消选中。我有一个数据库 table 和这 50 个复选框的每个单独的列，未选中的值 0 和选中的值 1。
在我的显示页面中，我有两个想法来制作这个复选框checked/unchecked，但它们看起来都很糟糕。
1.
<% if(fieldOneChecked==1){%>
<input type="checkbox" value='' name="fieldOne" checked="checked"/>
<% }else{%>
<input type="checkbox" name="fieldOne" value=''/>
<% }%>
2
<%
String foo=""
if(fieldOneChecked==1){String foo="checked=\"checked\"";}
%>
<input type="checkbox" name="fieldOne" value='' <%=foo%>/>
我必须对 50 个复选框重复相同的操作。
有没有更好更简单的方法？在jsp 或php 中，更好的逻辑是我想要的。 :)
提前致谢。
简单、快速、优雅（恕我直言）
所有这些代码都经过 100% 测试。
快吗？选中所有复选框的 200 毫秒往返
这是 FireFox Inspector 网络选项卡的屏幕截图。真实生活真实快速。在 18 mbs U-Verse 连接上。
我在许多生产网络应用程序中使用过它。
具有 5,500 个复选框的生产应用程序
我有一个 mp3 播放器网络应用程序。复选框用于创建播放列表。歌曲列表是从 1960 年到 2014 年的前 100 首 Billboard 歌曲，共 5,500 首歌曲。
此应用程序在 55 div 秒内加载所有 5,500 个复选框。一次只能显示 100 个。
首先，我认为复选框太小，尤其是在移动设备上查看时。我把它们做成 2em 宽和高。更容易看到和更大的光标目标。
为了提高可见性，我将复选框封装在 div 中以对背景进行着色。选中一次颜色，未选中一种颜色。
<?php ob_start("ob_gzhandler");
header('Content-Type: text/html; charset=utf-8');
header('Connection: Keep-Alive');
header('Keep-Alive: timeout=5, max=100');
header('Cache-Control: max-age=84600');
header('Vary: Accept-Encoding');
echo <<<EOT
<!DOCTYPE html>
<html lang="en"><head><title>Testbed</title><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
body{background:#333;}
.row{height:2.2em;width:10em;color:#fff;font:700 1em Arial,sans-serif;display:inline-block;margin:.2em;}
input[type="radio"],input[type="checkbox"]{width:2em;height:2em;border:2px solid #eee;outline:2px solid #eee;display: inline;margin:.3em;vertical-align: middle;position: relative;background:#144;color:#eee; display: inline;vertical-align: middle;position: relative;}
.btn{border:1px solid #2985EA;color: #fff;background-color:#2985EA;
background-image: -o-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -moz-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -webkit-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -ms-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: linear-gradient(to bottom, #2ef 0%, #02f 100%);
width:100%;padding: .5em;margin:.5em 0 0 0;border-radius: 3px 3px 3px 3px;font: 700 1em Arial,Helvetica,Calibri,sans-serif;overflow: visible;}
</style></head><body><div id="page">
<form action="#" method="post"><div>
EOT;
ob_flush();
$支票=array_fill(0,50,0); // 将所有 50 个复选框初始化为零
$sub = intval($_POST['sub']);
获取已提交的复选框
if($sub == 1){
foreach($_POST as $k => $v){
if(substr($k,0,3) == 'chk'){ // is it a check box?
$checked[$v] = 'checked="checked"'; // embedded in HTML checkbox tag
$checks[$v] = 1; // If checked, change value to 1
}
}
创建SQL更新
$sql = "UPDATE `checkboxes` SET "; // beginning of SQL INSERT query
foreach($checks as $key => $value){
$sql .= "`c$key`=$value,"; // concatenate SET checked values
}
$sql = substr($sql,0,-1) . ' WHERE `id` = 1'; // remove trailing comma and append WHERE
msqli_query($link,$sql);
}
从 SQL
中获取复选框
else{
$check = array('','checked="checked"');
$sql = "SELECT `c0`, `c1`, `c2`, `c3`, `c4`, `c5`, `c6`, `c7`, `c8`, `c9`, `c10`, `c11`, `c12`, `c13`, `c14`, `c15`, `c16`, `c17`, `c18`, `c19`, `c20`, `c21`, `c22`, `c23`, `c24`, `c25`, `c26`, `c27`, `c28`, `c29`, `c30`, `c31`, `c32`, `c33`, `c34`, `c35`, `c36`, `c37`, `c38`, `c39`, `c40`, `c41`, `c42`, `c43`, `c44`, `c45`, `c46`, `c47`, `c48`, `c49` FROM `checkboxes` WHERE `id`=1";
$result = msqli_query($link,$sql);
$row = mysqli_fetch_array($result, MYSQLI_NUM);
foreach($row as $key => $value){
$checked[$key] = $check[$value] ; // embedded in HTML checkbox tag
$checks[$key] = $value; // If checked, change value to 1
}
}
创建 HTML 个复选框
for($i=0;$i<50;$i++){$divs[] = $i;} // Create 50 HTML check boxes
foreach($divs as $key => $val){
echo <<<EOT
<div id="d$key" class="row">
<input type="checkbox" id="c$key" name="chk$key" value="$key" onclick="ck($key)" $checked[$key]/> Checkbox #$key
</div>
EOT;
}
指示复选框已提交的隐藏输入
echo <<<EOT
<br/><button class="btn">Submit</button>
<input type="hidden" name="sub" value="1" />
</div></form></div>
JavaScript
<script type="text/javascript">
//<![CDATA[
var c = new Array;
var d = new Array;
toggle = new Array;
toggle[true] = 'checked="checked"';
toggle[false] = '';
bg = new Array;
bg[true] = '#f00';
bg[false] = '#2985EA';
选中或取消选中复选框时更改颜色
function ck(id){
var div = document.getElementById('d' + id);
var checked = document.getElementById('c' + id).checked;
div.style.backgroundColor = bg[checked];
}
初始化函数
加载时，init() 函数会根据复选框是否选中来为复选框着色。
function init(){
var checked,did;
var divs = document.getElementsByTagName("div");
for (div=0; div<divs.length; div++){
did = divs[div].getAttribute("id");
if (did != null){
if (did.substring(0,1) == "d"){
var i = did.substring(1,5);
c[i] = document.getElementById('c' + i);
d[i] = document.getElementById('d' + i);
checked = c[i].checked;
d[i].style.backgroundColor=bg[checked];
}
}
}
}
window.onload = init;
//]]>
</script></body></html>
EOT;
?>
SQL 复选框测试 Table
CREATE TABLE IF NOT EXISTS `checkboxes` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`c0` int(11) NOT NULL DEFAULT '0',
`c1` int(11) NOT NULL DEFAULT '0',
`c2` int(11) NOT NULL DEFAULT '0',
`c3` int(11) NOT NULL DEFAULT '0',
`c4` int(11) NOT NULL DEFAULT '0',
`c5` int(11) NOT NULL DEFAULT '0',
`c6` int(11) NOT NULL DEFAULT '0',
`c7` int(11) NOT NULL DEFAULT '0',
`c8` int(11) NOT NULL DEFAULT '0',
`c9` int(11) NOT NULL DEFAULT '0',
`c10` int(11) NOT NULL DEFAULT '0',
`c11` int(11) NOT NULL DEFAULT '0',
`c12` int(11) NOT NULL DEFAULT '0',
`c13` int(11) NOT NULL DEFAULT '0',
`c14` int(11) NOT NULL DEFAULT '0',
`c15` int(11) NOT NULL DEFAULT '0',
`c16` int(11) NOT NULL DEFAULT '0',
`c17` int(11) NOT NULL DEFAULT '0',
`c18` int(11) NOT NULL DEFAULT '0',
`c19` int(11) NOT NULL DEFAULT '0',
`c20` int(11) NOT NULL DEFAULT '0',
`c21` int(11) NOT NULL DEFAULT '0',
`c22` int(11) NOT NULL DEFAULT '0',
`c23` int(11) NOT NULL DEFAULT '0',
`c24` int(11) NOT NULL DEFAULT '0',
`c25` int(11) NOT NULL DEFAULT '0',
`c26` int(11) NOT NULL DEFAULT '0',
`c27` int(11) NOT NULL DEFAULT '0',
`c28` int(11) NOT NULL DEFAULT '0',
`c29` int(11) NOT NULL DEFAULT '0',
`c30` int(11) NOT NULL DEFAULT '0',
`c31` int(11) NOT NULL DEFAULT '0',
`c32` int(11) NOT NULL DEFAULT '0',
`c33` int(11) NOT NULL DEFAULT '0',
`c34` int(11) NOT NULL DEFAULT '0',
`c35` int(11) NOT NULL DEFAULT '0',
`c36` int(11) NOT NULL DEFAULT '0',
`c37` int(11) NOT NULL DEFAULT '0',
`c38` int(11) NOT NULL DEFAULT '0',
`c39` int(11) NOT NULL DEFAULT '0',
`c40` int(11) NOT NULL DEFAULT '0',
`c41` int(11) NOT NULL DEFAULT '0',
`c42` int(11) NOT NULL DEFAULT '0',
`c43` int(11) NOT NULL DEFAULT '0',
`c44` int(11) NOT NULL DEFAULT '0',
`c45` int(11) NOT NULL DEFAULT '0',
`c46` int(11) NOT NULL DEFAULT '0',
`c47` int(11) NOT NULL DEFAULT '0',
`c48` int(11) NOT NULL DEFAULT '0',
`c49` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;
INSERT INTO `checkboxes` (`id`, `c0`, `c1`, `c2`, `c3`, `c4`, `c5`, `c6`, `c7`, `c8`, `c9`, `c10`, `c11`, `c12`, `c13`, `c14`, `c15`, `c16`, `c17`, `c18`, `c19`, `c20`, `c21`, `c22`, `c23`, `c24`, `c25`, `c26`, `c27`, `c28`, `c29`, `c30`, `c31`, `c32`, `c33`, `c34`, `c35`, `c36`, `c37`, `c38`, `c39`, `c40`, `c41`, `c42`, `c43`, `c44`, `c45`, `c46`, `c47`, `c48`, `c49`) VALUES (NULL, '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0');
片段
此代码段是使用上述 PHP 通过查看源代码并进行复制和粘贴创建的。我手动添加了 checked="checked"
var c = new Array;
var d = new Array;
toggle = new Array;
toggle[true] = 'checked="checked"';
toggle[false] = '';
bg = new Array;
bg[true] = '#f00';
bg[false] = '#2985EA';
function ck(id){
var div = document.getElementById('d' + id);
var checked = document.getElementById('c' + id).checked;
div.style.backgroundColor = bg[checked];
}
function init(){
var checked,did;
var divs = document.getElementsByTagName("div");
for (div=0; div<divs.length; div++){
did = divs[div].getAttribute("id");
if (did != null){
if (did.substring(0,1) == "d"){
var i = did.substring(1,5);
d[i] = document.getElementById('d' + i).style.backgroundColor=bg[document.getElementById('c' + i).checked];
}
}
}
}
window.onload = init;
body{background:#333;}
.row{height:2.2em;width:10em;color:#fff;font:700 1em Arial,sans-serif;display:inline-block;margin:.2em;}
input[type="radio"],input[type="checkbox"]{width:2em;height:2em;border:2px solid #eee;outline:2px solid #eee;display: inline;margin:.3em;vertical-align: middle;position: relative;background:#144;color:#eee; display: inline;vertical-align: middle;position: relative;}
.btn{border:1px solid #2985EA;color: #fff;background-color:#2985EA;
background-image: -o-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -moz-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -webkit-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -ms-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: linear-gradient(to bottom, #2ef 0%, #02f 100%);
width:100%;padding: .5em;margin:.5em 0 0 0;border-radius: 3px 3px 3px 3px;font: 700 1em Arial,Helvetica,Calibri,sans-serif;overflow: visible;}
<div id="page">
<form action="#" method="post"><div><div id="d0" class="row">
<input type="checkbox" id="c0" name="chk0" value="0" onclick="ck(0)" checked="checked"/> Checkbox #0
</div><div id="d1" class="row">
<input type="checkbox" id="c1" name="chk1" value="1" onclick="ck(1)" /> Checkbox #1
</div><div id="d2" class="row">
<input type="checkbox" id="c2" name="chk2" value="2" onclick="ck(2)" checked="checked"/> Checkbox #2
</div><div id="d3" class="row">
<input type="checkbox" id="c3" name="chk3" value="3" onclick="ck(3)" /> Checkbox #3
</div><div id="d4" class="row">
<input type="checkbox" id="c4" name="chk4" value="4" onclick="ck(4)"checked="checked" /> Checkbox #4
</div><div id="d5" class="row">
<input type="checkbox" id="c5" name="chk5" value="5" onclick="ck(5)" /> Checkbox #5
</div><div id="d6" class="row">
<input type="checkbox" id="c6" name="chk6" value="6" onclick="ck(6)" checked="checked"/> Checkbox #6
</div><div id="d7" class="row">
<input type="checkbox" id="c7" name="chk7" value="7" onclick="ck(7)" /> Checkbox #7
</div><div id="d8" class="row">
<input type="checkbox" id="c8" name="chk8" value="8" onclick="ck(8)" checked="checked" /> Checkbox #8
</div><div id="d9" class="row">
<input type="checkbox" id="c9" name="chk9" value="9" onclick="ck(9)" /> Checkbox #9
</div><div id="d10" class="row">
<input type="checkbox" id="c10" name="chk10" value="10" onclick="ck(10)" /> Checkbox #10
</div><div id="d11" class="row">
<input type="checkbox" id="c11" name="chk11" value="11" onclick="ck(11)" /> Checkbox #11
</div><div id="d12" class="row">
<input type="checkbox" id="c12" name="chk12" value="12" onclick="ck(12)" /> Checkbox #12
</div><div id="d13" class="row">
<input type="checkbox" id="c13" name="chk13" value="13" onclick="ck(13)" /> Checkbox #13
</div><div id="d14" class="row">
<input type="checkbox" id="c14" name="chk14" value="14" onclick="ck(14)" /> Checkbox #14
</div><div id="d15" class="row">
<input type="checkbox" id="c15" name="chk15" value="15" onclick="ck(15)" /> Checkbox #15
</div><div id="d16" class="row">
<input type="checkbox" id="c16" name="chk16" value="16" onclick="ck(16)" /> Checkbox #16
</div><div id="d17" class="row">
<input type="checkbox" id="c17" name="chk17" value="17" onclick="ck(17)" /> Checkbox #17
</div><div id="d18" class="row">
<input type="checkbox" id="c18" name="chk18" value="18" onclick="ck(18)" /> Checkbox #18
</div><div id="d19" class="row">
<input type="checkbox" id="c19" name="chk19" value="19" onclick="ck(19)" /> Checkbox #19
</div><div id="d20" class="row">
<input type="checkbox" id="c20" name="chk20" value="20" onclick="ck(20)" /> Checkbox #20
</div><div id="d21" class="row">
<input type="checkbox" id="c21" name="chk21" value="21" onclick="ck(21)" /> Checkbox #21
</div><div id="d22" class="row">
<input type="checkbox" id="c22" name="chk22" value="22" onclick="ck(22)" /> Checkbox #22
</div><div id="d23" class="row">
<input type="checkbox" id="c23" name="chk23" value="23" onclick="ck(23)" /> Checkbox #23
</div><div id="d24" class="row">
<input type="checkbox" id="c24" name="chk24" value="24" onclick="ck(24)" /> Checkbox #24
</div><div id="d25" class="row">
<input type="checkbox" id="c25" name="chk25" value="25" onclick="ck(25)" /> Checkbox #25
</div><div id="d26" class="row">
<input type="checkbox" id="c26" name="chk26" value="26" onclick="ck(26)" /> Checkbox #26
</div><div id="d27" class="row">
<input type="checkbox" id="c27" name="chk27" value="27" onclick="ck(27)" /> Checkbox #27
</div><div id="d28" class="row">
<input type="checkbox" id="c28" name="chk28" value="28" onclick="ck(28)" /> Checkbox #28
</div><div id="d29" class="row">
<input type="checkbox" id="c29" name="chk29" value="29" onclick="ck(29)" /> Checkbox #29
</div><div id="d30" class="row">
<input type="checkbox" id="c30" name="chk30" value="30" onclick="ck(30)" /> Checkbox #30
</div><div id="d31" class="row">
<input type="checkbox" id="c31" name="chk31" value="31" onclick="ck(31)" /> Checkbox #31
</div><div id="d32" class="row">
<input type="checkbox" id="c32" name="chk32" value="32" onclick="ck(32)" /> Checkbox #32
</div><div id="d33" class="row">
<input type="checkbox" id="c33" name="chk33" value="33" onclick="ck(33)" /> Checkbox #33
</div><div id="d34" class="row">
<input type="checkbox" id="c34" name="chk34" value="34" onclick="ck(34)" /> Checkbox #34
</div><div id="d35" class="row">
<input type="checkbox" id="c35" name="chk35" value="35" onclick="ck(35)" /> Checkbox #35
</div><div id="d36" class="row">
<input type="checkbox" id="c36" name="chk36" value="36" onclick="ck(36)" /> Checkbox #36
</div><div id="d37" class="row">
<input type="checkbox" id="c37" name="chk37" value="37" onclick="ck(37)" /> Checkbox #37
</div><div id="d38" class="row">
<input type="checkbox" id="c38" name="chk38" value="38" onclick="ck(38)" /> Checkbox #38
</div><div id="d39" class="row">
<input type="checkbox" id="c39" name="chk39" value="39" onclick="ck(39)" /> Checkbox #39
</div><div id="d40" class="row">
<input type="checkbox" id="c40" name="chk40" value="40" onclick="ck(40)" /> Checkbox #40
</div><div id="d41" class="row">
<input type="checkbox" id="c41" name="chk41" value="41" onclick="ck(41)" /> Checkbox #41
</div><div id="d42" class="row">
<input type="checkbox" id="c42" name="chk42" value="42" onclick="ck(42)" /> Checkbox #42
</div><div id="d43" class="row">
<input type="checkbox" id="c43" name="chk43" value="43" onclick="ck(43)" /> Checkbox #43
</div><div id="d44" class="row">
<input type="checkbox" id="c44" name="chk44" value="44" onclick="ck(44)" /> Checkbox #44
</div><div id="d45" class="row">
<input type="checkbox" id="c45" name="chk45" value="45" onclick="ck(45)" /> Checkbox #45
</div><div id="d46" class="row">
<input type="checkbox" id="c46" name="chk46" value="46" onclick="ck(46)" /> Checkbox #46
</div><div id="d47" class="row">
<input type="checkbox" id="c47" name="chk47" value="47" onclick="ck(47)" /> Checkbox #47
</div><div id="d48" class="row">
<input type="checkbox" id="c48" name="chk48" value="48" onclick="ck(48)" /> Checkbox #48
</div><div id="d49" class="row">
<input type="checkbox" id="c49" name="chk49" value="49" onclick="ck(49)" /> Checkbox #49
</div><br/><button class="btn">Submit</button>
</div></form></div>
我在一个页面中有 50 个复选框，假设这个页面被医生用来管理他的病人数据，所以有些复选框可以选中，有些可以取消选中。我有一个数据库 table 和这 50 个复选框的每个单独的列，未选中的值 0 和选中的值 1。
在我的显示页面中，我有两个想法来制作这个复选框checked/unchecked，但它们看起来都很糟糕。
1.
<% if(fieldOneChecked==1){%>
<input type="checkbox" value='' name="fieldOne" checked="checked"/>
<% }else{%>
<input type="checkbox" name="fieldOne" value=''/>
<% }%>
2
<%
String foo=""
if(fieldOneChecked==1){String foo="checked=\"checked\"";}
%>
<input type="checkbox" name="fieldOne" value='' <%=foo%>/>
我必须对 50 个复选框重复相同的操作。
有没有更好更简单的方法？在jsp 或php 中，更好的逻辑是我想要的。 :)
提前致谢。
简单、快速、优雅（恕我直言）
所有这些代码都经过 100% 测试。
快吗？选中所有复选框的 200 毫秒往返
这是 FireFox Inspector 网络选项卡的屏幕截图。真实生活真实快速。在 18 mbs U-Verse 连接上。
我在许多生产网络应用程序中使用过它。
具有 5,500 个复选框的生产应用程序
我有一个 mp3 播放器网络应用程序。复选框用于创建播放列表。歌曲列表是从 1960 年到 2014 年的前 100 首 Billboard 歌曲，共 5,500 首歌曲。
此应用程序在 55 div 秒内加载所有 5,500 个复选框。一次只能显示 100 个。
首先，我认为复选框太小，尤其是在移动设备上查看时。我把它们做成 2em 宽和高。更容易看到和更大的光标目标。
为了提高可见性，我将复选框封装在 div 中以对背景进行着色。选中一次颜色，未选中一种颜色。
<?php ob_start("ob_gzhandler");
header('Content-Type: text/html; charset=utf-8');
header('Connection: Keep-Alive');
header('Keep-Alive: timeout=5, max=100');
header('Cache-Control: max-age=84600');
header('Vary: Accept-Encoding');
echo <<<EOT
<!DOCTYPE html>
<html lang="en"><head><title>Testbed</title><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
body{background:#333;}
.row{height:2.2em;width:10em;color:#fff;font:700 1em Arial,sans-serif;display:inline-block;margin:.2em;}
input[type="radio"],input[type="checkbox"]{width:2em;height:2em;border:2px solid #eee;outline:2px solid #eee;display: inline;margin:.3em;vertical-align: middle;position: relative;background:#144;color:#eee; display: inline;vertical-align: middle;position: relative;}
.btn{border:1px solid #2985EA;color: #fff;background-color:#2985EA;
background-image: -o-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -moz-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -webkit-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -ms-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: linear-gradient(to bottom, #2ef 0%, #02f 100%);
width:100%;padding: .5em;margin:.5em 0 0 0;border-radius: 3px 3px 3px 3px;font: 700 1em Arial,Helvetica,Calibri,sans-serif;overflow: visible;}
</style></head><body><div id="page">
<form action="#" method="post"><div>
EOT;
ob_flush();
$支票=array_fill(0,50,0); // 将所有 50 个复选框初始化为零 $sub = intval($_POST['sub']);
获取已提交的复选框
if($sub == 1){
foreach($_POST as $k => $v){
if(substr($k,0,3) == 'chk'){ // is it a check box?
$checked[$v] = 'checked="checked"'; // embedded in HTML checkbox tag
$checks[$v] = 1; // If checked, change value to 1
}
}
创建SQL更新
$sql = "UPDATE `checkboxes` SET "; // beginning of SQL INSERT query
foreach($checks as $key => $value){
$sql .= "`c$key`=$value,"; // concatenate SET checked values
}
$sql = substr($sql,0,-1) . ' WHERE `id` = 1'; // remove trailing comma and append WHERE
msqli_query($link,$sql);
}
从 SQL
中获取复选框else{
$check = array('','checked="checked"');
$sql = "SELECT `c0`, `c1`, `c2`, `c3`, `c4`, `c5`, `c6`, `c7`, `c8`, `c9`, `c10`, `c11`, `c12`, `c13`, `c14`, `c15`, `c16`, `c17`, `c18`, `c19`, `c20`, `c21`, `c22`, `c23`, `c24`, `c25`, `c26`, `c27`, `c28`, `c29`, `c30`, `c31`, `c32`, `c33`, `c34`, `c35`, `c36`, `c37`, `c38`, `c39`, `c40`, `c41`, `c42`, `c43`, `c44`, `c45`, `c46`, `c47`, `c48`, `c49` FROM `checkboxes` WHERE `id`=1";
$result = msqli_query($link,$sql);
$row = mysqli_fetch_array($result, MYSQLI_NUM);
foreach($row as $key => $value){
$checked[$key] = $check[$value] ; // embedded in HTML checkbox tag
$checks[$key] = $value; // If checked, change value to 1
}
}
创建 HTML 个复选框
for($i=0;$i<50;$i++){$divs[] = $i;} // Create 50 HTML check boxes
foreach($divs as $key => $val){
echo <<<EOT
<div id="d$key" class="row">
<input type="checkbox" id="c$key" name="chk$key" value="$key" onclick="ck($key)" $checked[$key]/> Checkbox #$key
</div>
EOT;
}
指示复选框已提交的隐藏输入
echo <<<EOT
<br/><button class="btn">Submit</button>
<input type="hidden" name="sub" value="1" />
</div></form></div>
JavaScript
<script type="text/javascript">
//<![CDATA[
var c = new Array;
var d = new Array;
toggle = new Array;
toggle[true] = 'checked="checked"';
toggle[false] = '';
bg = new Array;
bg[true] = '#f00';
bg[false] = '#2985EA';
选中或取消选中复选框时更改颜色
function ck(id){
var div = document.getElementById('d' + id);
var checked = document.getElementById('c' + id).checked;
div.style.backgroundColor = bg[checked];
}
初始化函数
加载时，init() 函数会根据复选框是否选中来为复选框着色。
function init(){
var checked,did;
var divs = document.getElementsByTagName("div");
for (div=0; div<divs.length; div++){
did = divs[div].getAttribute("id");
if (did != null){
if (did.substring(0,1) == "d"){
var i = did.substring(1,5);
c[i] = document.getElementById('c' + i);
d[i] = document.getElementById('d' + i);
checked = c[i].checked;
d[i].style.backgroundColor=bg[checked];
}
}
}
}
window.onload = init;
//]]>
</script></body></html>
EOT;
?>
SQL 复选框测试 Table
CREATE TABLE IF NOT EXISTS `checkboxes` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`c0` int(11) NOT NULL DEFAULT '0',
`c1` int(11) NOT NULL DEFAULT '0',
`c2` int(11) NOT NULL DEFAULT '0',
`c3` int(11) NOT NULL DEFAULT '0',
`c4` int(11) NOT NULL DEFAULT '0',
`c5` int(11) NOT NULL DEFAULT '0',
`c6` int(11) NOT NULL DEFAULT '0',
`c7` int(11) NOT NULL DEFAULT '0',
`c8` int(11) NOT NULL DEFAULT '0',
`c9` int(11) NOT NULL DEFAULT '0',
`c10` int(11) NOT NULL DEFAULT '0',
`c11` int(11) NOT NULL DEFAULT '0',
`c12` int(11) NOT NULL DEFAULT '0',
`c13` int(11) NOT NULL DEFAULT '0',
`c14` int(11) NOT NULL DEFAULT '0',
`c15` int(11) NOT NULL DEFAULT '0',
`c16` int(11) NOT NULL DEFAULT '0',
`c17` int(11) NOT NULL DEFAULT '0',
`c18` int(11) NOT NULL DEFAULT '0',
`c19` int(11) NOT NULL DEFAULT '0',
`c20` int(11) NOT NULL DEFAULT '0',
`c21` int(11) NOT NULL DEFAULT '0',
`c22` int(11) NOT NULL DEFAULT '0',
`c23` int(11) NOT NULL DEFAULT '0',
`c24` int(11) NOT NULL DEFAULT '0',
`c25` int(11) NOT NULL DEFAULT '0',
`c26` int(11) NOT NULL DEFAULT '0',
`c27` int(11) NOT NULL DEFAULT '0',
`c28` int(11) NOT NULL DEFAULT '0',
`c29` int(11) NOT NULL DEFAULT '0',
`c30` int(11) NOT NULL DEFAULT '0',
`c31` int(11) NOT NULL DEFAULT '0',
`c32` int(11) NOT NULL DEFAULT '0',
`c33` int(11) NOT NULL DEFAULT '0',
`c34` int(11) NOT NULL DEFAULT '0',
`c35` int(11) NOT NULL DEFAULT '0',
`c36` int(11) NOT NULL DEFAULT '0',
`c37` int(11) NOT NULL DEFAULT '0',
`c38` int(11) NOT NULL DEFAULT '0',
`c39` int(11) NOT NULL DEFAULT '0',
`c40` int(11) NOT NULL DEFAULT '0',
`c41` int(11) NOT NULL DEFAULT '0',
`c42` int(11) NOT NULL DEFAULT '0',
`c43` int(11) NOT NULL DEFAULT '0',
`c44` int(11) NOT NULL DEFAULT '0',
`c45` int(11) NOT NULL DEFAULT '0',
`c46` int(11) NOT NULL DEFAULT '0',
`c47` int(11) NOT NULL DEFAULT '0',
`c48` int(11) NOT NULL DEFAULT '0',
`c49` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;
INSERT INTO `checkboxes` (`id`, `c0`, `c1`, `c2`, `c3`, `c4`, `c5`, `c6`, `c7`, `c8`, `c9`, `c10`, `c11`, `c12`, `c13`, `c14`, `c15`, `c16`, `c17`, `c18`, `c19`, `c20`, `c21`, `c22`, `c23`, `c24`, `c25`, `c26`, `c27`, `c28`, `c29`, `c30`, `c31`, `c32`, `c33`, `c34`, `c35`, `c36`, `c37`, `c38`, `c39`, `c40`, `c41`, `c42`, `c43`, `c44`, `c45`, `c46`, `c47`, `c48`, `c49`) VALUES (NULL, '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0');
片段
此代码段是使用上述 PHP 通过查看源代码并进行复制和粘贴创建的。我手动添加了 checked="checked"
var c = new Array;
var d = new Array;
toggle = new Array;
toggle[true] = 'checked="checked"';
toggle[false] = '';
bg = new Array;
bg[true] = '#f00';
bg[false] = '#2985EA';
function ck(id){
var div = document.getElementById('d' + id);
var checked = document.getElementById('c' + id).checked;
div.style.backgroundColor = bg[checked];
}
function init(){
var checked,did;
var divs = document.getElementsByTagName("div");
for (div=0; div<divs.length; div++){
did = divs[div].getAttribute("id");
if (did != null){
if (did.substring(0,1) == "d"){
var i = did.substring(1,5);
d[i] = document.getElementById('d' + i).style.backgroundColor=bg[document.getElementById('c' + i).checked];
}
}
}
}
window.onload = init;
body{background:#333;}
.row{height:2.2em;width:10em;color:#fff;font:700 1em Arial,sans-serif;display:inline-block;margin:.2em;}
input[type="radio"],input[type="checkbox"]{width:2em;height:2em;border:2px solid #eee;outline:2px solid #eee;display: inline;margin:.3em;vertical-align: middle;position: relative;background:#144;color:#eee; display: inline;vertical-align: middle;position: relative;}
.btn{border:1px solid #2985EA;color: #fff;background-color:#2985EA;
background-image: -o-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -moz-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -webkit-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -ms-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: linear-gradient(to bottom, #2ef 0%, #02f 100%);
width:100%;padding: .5em;margin:.5em 0 0 0;border-radius: 3px 3px 3px 3px;font: 700 1em Arial,Helvetica,Calibri,sans-serif;overflow: visible;}
<div id="page">
<form action="#" method="post"><div><div id="d0" class="row">
<input type="checkbox" id="c0" name="chk0" value="0" onclick="ck(0)" checked="checked"/> Checkbox #0
</div><div id="d1" class="row">
<input type="checkbox" id="c1" name="chk1" value="1" onclick="ck(1)" /> Checkbox #1
</div><div id="d2" class="row">
<input type="checkbox" id="c2" name="chk2" value="2" onclick="ck(2)" checked="checked"/> Checkbox #2
</div><div id="d3" class="row">
<input type="checkbox" id="c3" name="chk3" value="3" onclick="ck(3)" /> Checkbox #3
</div><div id="d4" class="row">
<input type="checkbox" id="c4" name="chk4" value="4" onclick="ck(4)"checked="checked" /> Checkbox #4
</div><div id="d5" class="row">
<input type="checkbox" id="c5" name="chk5" value="5" onclick="ck(5)" /> Checkbox #5
</div><div id="d6" class="row">
<input type="checkbox" id="c6" name="chk6" value="6" onclick="ck(6)" checked="checked"/> Checkbox #6
</div><div id="d7" class="row">
<input type="checkbox" id="c7" name="chk7" value="7" onclick="ck(7)" /> Checkbox #7
</div><div id="d8" class="row">
<input type="checkbox" id="c8" name="chk8" value="8" onclick="ck(8)" checked="checked" /> Checkbox #8
</div><div id="d9" class="row">
<input type="checkbox" id="c9" name="chk9" value="9" onclick="ck(9)" /> Checkbox #9
</div><div id="d10" class="row">
<input type="checkbox" id="c10" name="chk10" value="10" onclick="ck(10)" /> Checkbox #10
</div><div id="d11" class="row">
<input type="checkbox" id="c11" name="chk11" value="11" onclick="ck(11)" /> Checkbox #11
</div><div id="d12" class="row">
<input type="checkbox" id="c12" name="chk12" value="12" onclick="ck(12)" /> Checkbox #12
</div><div id="d13" class="row">
<input type="checkbox" id="c13" name="chk13" value="13" onclick="ck(13)" /> Checkbox #13
</div><div id="d14" class="row">
<input type="checkbox" id="c14" name="chk14" value="14" onclick="ck(14)" /> Checkbox #14
</div><div id="d15" class="row">
<input type="checkbox" id="c15" name="chk15" value="15" onclick="ck(15)" /> Checkbox #15
</div><div id="d16" class="row">
<input type="checkbox" id="c16" name="chk16" value="16" onclick="ck(16)" /> Checkbox #16
</div><div id="d17" class="row">
<input type="checkbox" id="c17" name="chk17" value="17" onclick="ck(17)" /> Checkbox #17
</div><div id="d18" class="row">
<input type="checkbox" id="c18" name="chk18" value="18" onclick="ck(18)" /> Checkbox #18
</div><div id="d19" class="row">
<input type="checkbox" id="c19" name="chk19" value="19" onclick="ck(19)" /> Checkbox #19
</div><div id="d20" class="row">
<input type="checkbox" id="c20" name="chk20" value="20" onclick="ck(20)" /> Checkbox #20
</div><div id="d21" class="row">
<input type="checkbox" id="c21" name="chk21" value="21" onclick="ck(21)" /> Checkbox #21
</div><div id="d22" class="row">
<input type="checkbox" id="c22" name="chk22" value="22" onclick="ck(22)" /> Checkbox #22
</div><div id="d23" class="row">
<input type="checkbox" id="c23" name="chk23" value="23" onclick="ck(23)" /> Checkbox #23
</div><div id="d24" class="row">
<input type="checkbox" id="c24" name="chk24" value="24" onclick="ck(24)" /> Checkbox #24
</div><div id="d25" class="row">
<input type="checkbox" id="c25" name="chk25" value="25" onclick="ck(25)" /> Checkbox #25
</div><div id="d26" class="row">
<input type="checkbox" id="c26" name="chk26" value="26" onclick="ck(26)" /> Checkbox #26
</div><div id="d27" class="row">
<input type="checkbox" id="c27" name="chk27" value="27" onclick="ck(27)" /> Checkbox #27
</div><div id="d28" class="row">
<input type="checkbox" id="c28" name="chk28" value="28" onclick="ck(28)" /> Checkbox #28
</div><div id="d29" class="row">
<input type="checkbox" id="c29" name="chk29" value="29" onclick="ck(29)" /> Checkbox #29
</div><div id="d30" class="row">
<input type="checkbox" id="c30" name="chk30" value="30" onclick="ck(30)" /> Checkbox #30
</div><div id="d31" class="row">
<input type="checkbox" id="c31" name="chk31" value="31" onclick="ck(31)" /> Checkbox #31
</div><div id="d32" class="row">
<input type="checkbox" id="c32" name="chk32" value="32" onclick="ck(32)" /> Checkbox #32
</div><div id="d33" class="row">
<input type="checkbox" id="c33" name="chk33" value="33" onclick="ck(33)" /> Checkbox #33
</div><div id="d34" class="row">
<input type="checkbox" id="c34" name="chk34" value="34" onclick="ck(34)" /> Checkbox #34
</div><div id="d35" class="row">
<input type="checkbox" id="c35" name="chk35" value="35" onclick="ck(35)" /> Checkbox #35
</div><div id="d36" class="row">
<input type="checkbox" id="c36" name="chk36" value="36" onclick="ck(36)" /> Checkbox #36
</div><div id="d37" class="row">
<input type="checkbox" id="c37" name="chk37" value="37" onclick="ck(37)" /> Checkbox #37
</div><div id="d38" class="row">
<input type="checkbox" id="c38" name="chk38" value="38" onclick="ck(38)" /> Checkbox #38
</div><div id="d39" class="row">
<input type="checkbox" id="c39" name="chk39" value="39" onclick="ck(39)" /> Checkbox #39
</div><div id="d40" class="row">
<input type="checkbox" id="c40" name="chk40" value="40" onclick="ck(40)" /> Checkbox #40
</div><div id="d41" class="row">
<input type="checkbox" id="c41" name="chk41" value="41" onclick="ck(41)" /> Checkbox #41
</div><div id="d42" class="row">
<input type="checkbox" id="c42" name="chk42" value="42" onclick="ck(42)" /> Checkbox #42
</div><div id="d43" class="row">
<input type="checkbox" id="c43" name="chk43" value="43" onclick="ck(43)" /> Checkbox #43
</div><div id="d44" class="row">
<input type="checkbox" id="c44" name="chk44" value="44" onclick="ck(44)" /> Checkbox #44
</div><div id="d45" class="row">
<input type="checkbox" id="c45" name="chk45" value="45" onclick="ck(45)" /> Checkbox #45
</div><div id="d46" class="row">
<input type="checkbox" id="c46" name="chk46" value="46" onclick="ck(46)" /> Checkbox #46
</div><div id="d47" class="row">
<input type="checkbox" id="c47" name="chk47" value="47" onclick="ck(47)" /> Checkbox #47
</div><div id="d48" class="row">
<input type="checkbox" id="c48" name="chk48" value="48" onclick="ck(48)" /> Checkbox #48
</div><div id="d49" class="row">
<input type="checkbox" id="c49" name="chk49" value="49" onclick="ck(49)" /> Checkbox #49
</div><br/><button class="btn">Submit</button>
</div></form></div>