选中复选框(input checkbox)显示下面隐藏的信息_中国网站频道，官方网站，中国品牌网站，网页特效，JS广告，网站截图，酷站推荐，图标，APP，按钮，中国网站第一品牌频道网站频道，div css，flash广告代码，网页特效，png图片，后台模板，flash特效，软件下载，中文字体下载，英文字体下载，

> 代码 > 表单

选中复选框(input checkbox)显示下面隐藏的信息

作者：vip_260 来源：未知日期：2010/9/16 16:52:22 人气：标签：

选中复选框(input checkbox)显示下面隐藏的信息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选中复选框(input checkbox)显示下面隐藏的信息</title>
<style type="text/css">
* { margin:0; padding:0; }
li{ list-style-type:none;}
body { text-align:center; background:#fff; font:12px/20px simsun; color:#000; }
input, button, textarea { font-family:simsun; vertical-align:middle; font-size:12px; }
button, .btn { background:url(img/btn.png) no-repeat; width:79px; height:25px; line-height:24px; overflow:hidden; border:none; cursor:pointer; font-size:12px; margin:5px 0; }
dt { margin:10px auto 5px auto; height:20px; position:relative; }
dd.disable { color:#CECECE!important; }
dd.disable input { visibility:hidden; }
</style>
</head>
<body>
<div class="left">
  <dl>
    <dt>
      <input type="checkbox" id="check1" onclick="changeStat(1)"/>
    问题1</dt>
    <dd class="disable" id="tab1">
      <ul class="long">
        <li>
          <input type="checkbox" name="check11" id="reason11"/>
          列表无法获得</li>
        <li>
          <input type="checkbox" name="check12" id="reason12"/>
          列表无法获得</li>
        <li>
          <input type="checkbox" name="check13" id="reason13"/>
          列表无法获得</li>
        <li>
          <input type="checkbox" name="check14" id="reason14"/>
          列表无法获得</li>
        <li>
          <input type="checkbox" name="check15" id="reason15"/>
          列表无法获得</li>
        <li>
          <input type="checkbox" name="check16" id="reason16"/>
          列表无法获得</li>
      </ul>
    </dd>
    <dt>
      <input type="checkbox" id="check2" onclick="changeStat(2)"/>
      问题2</dt>
    <dd class="disable" id="tab2">
      <ul class="long">
        <li>
          <input type="checkbox" name="check21" id="reason21"/>
          列表无法获得</li>
        <li>
          <input type="checkbox" name="check22" id="reason22"/>
          人太少，没意思</li>
        <li>
          <input type="checkbox" name="check23" id="reason23"/>
          人太少，没意思</li>
        <li>
          <input type="checkbox" name="check24" id="reason24"/>
          人太少，没意思</li>
        <li>
          <input type="checkbox" name="check25" id="reason25"/>
          人太少，没意思</li>
        <li>
          <input type="checkbox" name="check26" id="reason26"/>
          人太少，没意思</li>
      </ul>
    </dd>
  </dl>
</div>
<script type="text/javascript">
function changeStat(id)
	{ 
		box = document.getElementById("check"+id);
		if (box.checked)
		{
			document.getElementById("tab"+id).className="long";
		}
		else
		{
			document.getElementById("tab"+id).className="disable";
		}
    } 
function fillChecks(){
                var checks="";
                for(var i=1;i<=3;i++){
                    checks+= document.getElementById("reason0"+i).checked?"1":"0";
                    checks+="|";
                }
				for(var i=1;i<=6;i++){
                    checks+= document.getElementById("reason1"+i).checked?"1":"0";
                    checks+="|";
                }
				for(var i=1;i<=6;i++){
                    checks+= document.getElementById("reason2"+i).checked?"1":"0";
                    checks+="|";
                }
				for(var i=1;i<=2;i++){
                    checks+= document.getElementById("reason3"+i).checked?"1":"0";
                    checks+="|";
                }
				for(var i=41;i<=57;i++){
                    checks+= document.getElementById("reason"+i).checked?"1":"0";
                    checks+="|";
                }                
               
                checks+=document.getElementById("remark").value?document.getElementById("remark").value:" ";              
				
                document.getElementById("checks").value=checks;
            }
</script>
</body>
</html>

公告

更新

> 代码 > 表单

选中复选框(input checkbox)显示下面隐藏的信息