显示基于数据库值的已选中和未选中复选框数量的最佳方法

debugcn 发表于 Dev

阿伦·泽维尔（Arun Xavier）

我在一个页面中有50个复选框，比如说医生使用此页面来管理他的患者数据，因此某些复选框可以选中，某些复选框可以不选中。我有一个数据库表，并为这50个复选框分别设置了单独的列，其中未选中的值为0，选中的值为1。

在我的显示页面上，我有两个想法可以使此复选框处于选中状态/未选中状态，但是两者都显得笨拙。

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中，我想要一个更好的逻辑。:)

提前致谢。

误解

简单，快速，优雅（IMHO）

所有这些代码都经过100％测试。

快速地？选中所有复选框的往返行程为200 mS

这是FireFox Inspector“网络”选项卡中的屏幕截图。真实生活真实快速。在18 mbs U形连接上。

FireFox页面计时

HTTP响应参数

我已经在许多生产网络应用程序中使用过此功能。

带有5,500个复选框的量产应用程序

我有一个mp3播放器网络应用。复选框用于创建播放列表。歌曲列表是1960年至2014年的前100名Billboard歌曲，其中有5500首。

此应用程序会加载55个div中的所有5,500个复选框。一次只能看到100个。

1974年广告牌十佳

首先，我认为复选框太小，尤其是在移动设备上查看时。我把它们做成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();

$ checks = 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 UPDATE

  $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]/>&#x2002;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复选框测试表

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"/>&#x2002;Checkbox #0
</div><div id="d1" class="row">
<input type="checkbox" id="c1" name="chk1" value="1" onclick="ck(1)" />&#x2002;Checkbox #1
</div><div id="d2" class="row">
<input type="checkbox" id="c2" name="chk2" value="2" onclick="ck(2)" checked="checked"/>&#x2002;Checkbox #2
</div><div id="d3" class="row">
<input type="checkbox" id="c3" name="chk3" value="3" onclick="ck(3)" />&#x2002;Checkbox #3
</div><div id="d4" class="row">
<input type="checkbox" id="c4" name="chk4" value="4" onclick="ck(4)"checked="checked" />&#x2002;Checkbox #4
</div><div id="d5" class="row">
<input type="checkbox" id="c5" name="chk5" value="5" onclick="ck(5)" />&#x2002;Checkbox #5
</div><div id="d6" class="row">
<input type="checkbox" id="c6" name="chk6" value="6" onclick="ck(6)" checked="checked"/>&#x2002;Checkbox #6
</div><div id="d7" class="row">
<input type="checkbox" id="c7" name="chk7" value="7" onclick="ck(7)" />&#x2002;Checkbox #7
</div><div id="d8" class="row">
<input type="checkbox" id="c8" name="chk8" value="8" onclick="ck(8)" checked="checked" />&#x2002;Checkbox #8
</div><div id="d9" class="row">
<input type="checkbox" id="c9" name="chk9" value="9" onclick="ck(9)" />&#x2002;Checkbox #9
</div><div id="d10" class="row">
<input type="checkbox" id="c10" name="chk10" value="10" onclick="ck(10)" />&#x2002;Checkbox #10
</div><div id="d11" class="row">
<input type="checkbox" id="c11" name="chk11" value="11" onclick="ck(11)" />&#x2002;Checkbox #11
</div><div id="d12" class="row">
<input type="checkbox" id="c12" name="chk12" value="12" onclick="ck(12)" />&#x2002;Checkbox #12
</div><div id="d13" class="row">
<input type="checkbox" id="c13" name="chk13" value="13" onclick="ck(13)" />&#x2002;Checkbox #13
</div><div id="d14" class="row">
<input type="checkbox" id="c14" name="chk14" value="14" onclick="ck(14)" />&#x2002;Checkbox #14
</div><div id="d15" class="row">
<input type="checkbox" id="c15" name="chk15" value="15" onclick="ck(15)" />&#x2002;Checkbox #15
</div><div id="d16" class="row">
<input type="checkbox" id="c16" name="chk16" value="16" onclick="ck(16)" />&#x2002;Checkbox #16
</div><div id="d17" class="row">
<input type="checkbox" id="c17" name="chk17" value="17" onclick="ck(17)" />&#x2002;Checkbox #17
</div><div id="d18" class="row">
<input type="checkbox" id="c18" name="chk18" value="18" onclick="ck(18)" />&#x2002;Checkbox #18
</div><div id="d19" class="row">
<input type="checkbox" id="c19" name="chk19" value="19" onclick="ck(19)" />&#x2002;Checkbox #19
</div><div id="d20" class="row">
<input type="checkbox" id="c20" name="chk20" value="20" onclick="ck(20)" />&#x2002;Checkbox #20
</div><div id="d21" class="row">
<input type="checkbox" id="c21" name="chk21" value="21" onclick="ck(21)" />&#x2002;Checkbox #21
</div><div id="d22" class="row">
<input type="checkbox" id="c22" name="chk22" value="22" onclick="ck(22)" />&#x2002;Checkbox #22
</div><div id="d23" class="row">
<input type="checkbox" id="c23" name="chk23" value="23" onclick="ck(23)" />&#x2002;Checkbox #23
</div><div id="d24" class="row">
<input type="checkbox" id="c24" name="chk24" value="24" onclick="ck(24)" />&#x2002;Checkbox #24
</div><div id="d25" class="row">
<input type="checkbox" id="c25" name="chk25" value="25" onclick="ck(25)" />&#x2002;Checkbox #25
</div><div id="d26" class="row">
<input type="checkbox" id="c26" name="chk26" value="26" onclick="ck(26)" />&#x2002;Checkbox #26
</div><div id="d27" class="row">
<input type="checkbox" id="c27" name="chk27" value="27" onclick="ck(27)" />&#x2002;Checkbox #27
</div><div id="d28" class="row">
<input type="checkbox" id="c28" name="chk28" value="28" onclick="ck(28)" />&#x2002;Checkbox #28
</div><div id="d29" class="row">
<input type="checkbox" id="c29" name="chk29" value="29" onclick="ck(29)" />&#x2002;Checkbox #29
</div><div id="d30" class="row">
<input type="checkbox" id="c30" name="chk30" value="30" onclick="ck(30)" />&#x2002;Checkbox #30
</div><div id="d31" class="row">
<input type="checkbox" id="c31" name="chk31" value="31" onclick="ck(31)" />&#x2002;Checkbox #31
</div><div id="d32" class="row">
<input type="checkbox" id="c32" name="chk32" value="32" onclick="ck(32)" />&#x2002;Checkbox #32
</div><div id="d33" class="row">
<input type="checkbox" id="c33" name="chk33" value="33" onclick="ck(33)" />&#x2002;Checkbox #33
</div><div id="d34" class="row">
<input type="checkbox" id="c34" name="chk34" value="34" onclick="ck(34)" />&#x2002;Checkbox #34
</div><div id="d35" class="row">
<input type="checkbox" id="c35" name="chk35" value="35" onclick="ck(35)" />&#x2002;Checkbox #35
</div><div id="d36" class="row">
<input type="checkbox" id="c36" name="chk36" value="36" onclick="ck(36)" />&#x2002;Checkbox #36
</div><div id="d37" class="row">
<input type="checkbox" id="c37" name="chk37" value="37" onclick="ck(37)" />&#x2002;Checkbox #37
</div><div id="d38" class="row">
<input type="checkbox" id="c38" name="chk38" value="38" onclick="ck(38)" />&#x2002;Checkbox #38
</div><div id="d39" class="row">
<input type="checkbox" id="c39" name="chk39" value="39" onclick="ck(39)" />&#x2002;Checkbox #39
</div><div id="d40" class="row">
<input type="checkbox" id="c40" name="chk40" value="40" onclick="ck(40)" />&#x2002;Checkbox #40
</div><div id="d41" class="row">
<input type="checkbox" id="c41" name="chk41" value="41" onclick="ck(41)" />&#x2002;Checkbox #41
</div><div id="d42" class="row">
<input type="checkbox" id="c42" name="chk42" value="42" onclick="ck(42)" />&#x2002;Checkbox #42
</div><div id="d43" class="row">
<input type="checkbox" id="c43" name="chk43" value="43" onclick="ck(43)" />&#x2002;Checkbox #43
</div><div id="d44" class="row">
<input type="checkbox" id="c44" name="chk44" value="44" onclick="ck(44)" />&#x2002;Checkbox #44
</div><div id="d45" class="row">
<input type="checkbox" id="c45" name="chk45" value="45" onclick="ck(45)" />&#x2002;Checkbox #45
</div><div id="d46" class="row">
<input type="checkbox" id="c46" name="chk46" value="46" onclick="ck(46)" />&#x2002;Checkbox #46
</div><div id="d47" class="row">
<input type="checkbox" id="c47" name="chk47" value="47" onclick="ck(47)" />&#x2002;Checkbox #47
</div><div id="d48" class="row">
<input type="checkbox" id="c48" name="chk48" value="48" onclick="ck(48)" />&#x2002;Checkbox #48
</div><div id="d49" class="row">
<input type="checkbox" id="c49" name="chk49" value="49" onclick="ck(49)" />&#x2002;Checkbox #49
</div><br/><button class="btn">Submit</button>
</div></form></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。