下面自己放连个文件试
---
1.php
<script>
function $(id){
return document.getElementById(id)
}
function checkalls(obj,form){
var bool=(obj.checked)?true:false
for(var i=0i<form.lengthi++){
form.all[i].selected=bool
}
}
</script>
<form action="2.php" method="post" >
<input type="checkbox" name="checkall" id="checkall" onclick="checkalls(this,$('select'))" checked>全选<br>
<select multiple name="select[]" id="select" size="15" style="width:210pxheight:250px">
<option value="1" selected>顿饭大幅度</option>
<option value="2" selected>大幅度</option>
<option value="3" selected>大幅缩</option>
<option value="4" selected>到司法所</option>
</select>
<INPUT TYPE="submit" value="提交">
</form>
---
2.php
<?
echo $select[0]
echo $select[1]
echo $select[2]
echo $select[3]
?>
注意代码未整理 待修正。不过基本功能是这样的，你也可以自己再改下。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>admin control panel</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="content-type" content="text/htmlcharset=utf-8" />
<style>
body{
color:#666
font-family:Tahoma,Verdana,sans-serif,simsun
font-size:12px
}
select, label, textarea, input {
font-family:'lucida grande',tahoma,verdana,arial,simsun,sans-serif
}
ul {
list-style-type:none
padding:0px
margin:0px
}
h2{
color:#526ea6
font-size:14px
margin-left:8px
}
a{
color:#000
}
*{
margin:0pxpadding:0px
}
select{
border:1px solid #BDC7D8
padding:2px
width:100px
}
#wrapper{
width:95%
margin:0px auto
border:5px solid #F0F8FF
}
#header{
height:80px
}
#header h1{
padding: 20px 7px 0px
}
#header h1 span{
color:#FF6347
font-size:12px
margin-left:3px
}
#mainNav ul{
height:35px
padding-left:10px
background:#ccc url(f2.gif)
border-top:1px solid #ccc
border-bottom:1px solid #ccc
}
#mainNav li{
float:left
}
#mainNav li a{
font-size:14px
line-height:35px
color:#000
text-decoration:none
float:left
display:block
padding:0px 0px 0px 10px
}
#mainNav li a b{
display:blockpadding:0px 10px 0px 0px
}
#mainNav li a:hover, #mainNav li a.current{
background:url(frame-mena.gif) left center no-repeat
}
#mainNav li a:hover b, #mainNav li a.current b{
background:url(frame-mena.gif) right center no-repeat
}
#contentWrapper{
padding:7px
}
#ctrlPanl{
border:1px solid #cccheight:30pxline-height:30pxpadding:2px
}
#ctrlPanl #olink{
float:left
}
#ctrlPanl #olink li{
float:left
}
#ctrlPanl #olink li a{
display:block
padding:0px 4px
text-decoration:none
}
#content{
margin:8px auto
}
.gutter table{
width:100%
border-collapse:collapse
border:1px solid #ccc
}
table th{
height:30px
border-right:1px solid #ccc
border-bottom:1px solid #ccc
background:#F0F8FF
}
table tbody td{
height:30px
text-align:center
border-bottom:1px solid #ccc
}
table tbody tr:hover td{
background:#F0FFF0
}
table tbody tr.select td{
background:#F5FFFA
}
table tfoot td{
height:30px
background:#F0F8FF
}
.pagenav{
float:left
}
.pagenav a, .pagenav span{
float:leftdisplay:block
margin-left:4px
padding:2px 2px
}
#footer{
}
#footer div{
color:#666
padding:7px
}
</style>
</HEAD>
<script>
var $ = function(id){
return document.getElementById(id)
}
function jtable(f, ctrl, chkCallback){
var achkbox = $(f).getElementsByTagName("input")
var ochkbox = []
var otr = []
for(var i = 0i <achkbox.lengthi++){
if (achkbox[i].type.toLowerCase() == "checkbox" &&achkbox[i].id != ctrl){
ochkbox.push(achkbox[i])
otr.push(achkbox[i].parentNode.parentNode)
}
}
$(ctrl).onclick = function(call){
for(var i = 0i <ochkbox.lengthi++){
if (this.checked){
ochkbox[i].checked = 1
ochkbox[i].parentNode.parentNode.className = "select"
}else{
ochkbox[i].checked = 0
ochkbox[i].parentNode.parentNode.className = ""
}
}
chkCallback()
}
for(var i = 0i <otr.lengthi++){
otr[i].onclick = function(){
if (this.x != "1"){
this.x="1"
this.className = "select"
this.getElementsByTagName("input")[0].checked = 1
}
else{
this.x="0"
this.className = ""
this.getElementsByTagName("input")[0].checked = 0
}
}
otr[i].onmouseover = function(){
if(this.x != "1")
this.style.background = "#F5F5F5"
else
this.style.background = ""
}
otr[i].onmouseout = function(){
if(this.x != "1")
this.style.background = ""
}
}
}
function Observer(){
}
Observer.prototype.update = function(arg){
return
}
//Subject class construct
function Subject(){
this.Observers = []
}
//Subject prototype methods
Subject.prototype = {
notify:function(context){
for(var i = 0i <this.Observers.lengthi++){
this.Observers[i].update(context)
}
},
addObserver:function(obj){
this.Observers.push(obj)
}
}
Object.extend = function(d,s){
for(p in s){
d[p] = s[p]
}
return d
}
function deleteObserver(){}
Object.extend(deleteObserver, Observer)
deleteObserver.update = function(num){
if (num)
{
document.getElementById("dbtn").style.color="#000"
}else{
document.getElementById("dbtn").style.color="#999"
}
}
var tt = 4
function chkIsAll(){}
chkIsAll.update = function(num){
if (num == 0)
{
$("chkboxCtr").checked = 0
}
if (num == 4)
{
$("chkboxCtr").checked = 1
}
}
var oSub = new Subject()
oSub.addObserver(deleteObserver)
oSub.addObserver(chkIsAll)
var chkbox = {
chkState:{},
check:function(name){
var aChkbox = document.getElementsByTagName("input")
var tCount = 0
for(var i = 0i <aChkbox.lengthi++){
if (aChkbox[i].type == "checkbox" &&aChkbox[i].name == name &&aChkbox[i].checked)
{
if (!chkbox.chkState[name])
{
chkbox.chkState[name] = 0
tCount += 1
}else{
tCount += 1
}
}
}
if (tCount != chkbox.chkState[name])
{
oSub.notify(tCount)
chkbox.chkState[name] = tCount
}
}
}
</script>
<BODY>
<div id="wrapper">
<div id="header"><h1>oweb for your easier online life<span>(重庆大学版)</span></h1></div>
<div id="mainNav">
<ul>
<li><a href="#" onfocus="this.blur()"><b>管理首页</b></a></li>
<li><a href="#" onfocus="this.blur()" class="current"><b>产品</b></a></li>
<li><a href="#" onfocus="this.blur()"><b>文章</b></a></li>
<li><a href="#" onfocus="this.blur()"><b>图片</b></a></li>
<li><a href="#" onfocus="this.blur()"><b>文件</b></a></li>
<li><a href="#" onfocus="this.blur()"><b>留言</b></a></li>
<li><a href="#" onfocus="this.blur()"><b>设置</b></a></li>
</ul>
<div style="clear:both"></div>
</div>
<div id="mainContent">
<div id="contentWrapper">
<h2 style="margin:4px auto">产品管理/书籍</h2>
<div id="ctrlPanl">
<div id="olink">
<ul>
<li><a href="#" style="color:#999" id="dbtn">删除</a></li>
<li><a href="#">添加新产品</a></li>
<li><a href="#">管理分类</a></li>
</ul>
</div>
</div>
<div style="clear:both"></div>
<div id="content">
<div class="gutter">
<form id="pForm" action="<{$config.baseURL}>/product/" method="post" >
<table>
<thead>
<tr>
<th><input type="checkbox" id="chkboxCtr" name="ctrl"/></th>
<th>ID</th>
<th>产品名</th>
<th>所属分类</th>
<th>产品图片</th>
<th>产品添加时间</th>
<th>是否显示</th>
<th>是否推荐到首页</th>
</tr>
</thead>
<tbody>
<tr class="select">
<td><input type="checkbox" value="" name="id" onclick="javascript:chkbox.check('id')"/></td>
<td>1</td>
<td>联想天逸电脑</td>
<td>电脑</td>
<td><img src="pt.gif" height="30px"/></td>
<td>2008-10-10</td>
<td><img src="qun_kg_g.gif"/></td>
<td><img src="qun_kg_k.gif"/></td>
</tr>
<tr class="select">
<td><input type="checkbox" value="" name="id" onclick="javascript:chkbox.check('id')"/></td>
<td>2</td>
<td>中华牌沙滩椅</td>
<td>家具</td>
<td><img src="pt.gif" height="30px"/></td>
<td>2008-10-02</td>
<td><img src="qun_kg_g.gif"/></td>
<td><img src="qun_kg_k.gif"/></td>
</tr>
<tr class="select">
<td><input type="checkbox" value="" name="id" onclick="javascript:chkbox.check('id')"/></td>
<td>3</td>
<td>无懈可击web设计</td>
<td>书籍</td>
<td><img src="pt.gif" height="30px"/></td>
<td>2008-02-10</td>
<td><img src="qun_kg_g.gif"/></td>
<td><img src="qun_kg_k.gif"/></td>
</tr>
<tr>
<td><input type="checkbox" value="" name="id" onclick="javascript:chkbox.check('id')"/></td>
<td>4</td>
<td>联想轩逸电脑</td>
<td>电脑</td>
<td><img src="pt.gif" height="30px"/></td>
<td>2008-10-10</td>
<td><img src="qun_kg_g.gif"/></td>
<td><img src="qun_kg_k.gif"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="8"><div class="pagenav"><span>3/5</span><a href="#">首页</a><a href="#">上一页</a><a href="#">下一页</a><a href="#">末页</a></div></td>
</tr>
</tfoot>
</table>
</form>
</div>
</div>
</div>
</div>
<div id="footer"><div>copyright©2008 oweb alpha 1.0 test for test</div></div>
</div>
</BODY>
</HTML>
<script>jtable("pForm", "chkboxCtr", function(){chkbox.check('id')})</script>
写判断。1.点击全选时是把所有的项加上checked
2.获取这个checked的数量
3.当checked数量不等于全部项的数量时，就把全选按钮的checked属性设为false
