怎么做一个全选的按钮？ - JavaScript论坛

baobao52101

等　级：新手上路
帖　子：12
专家分：0
注　册：2007-11-11

第 2 楼

得分:0

自己看看吧!自己把图片换一哈

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
var inlay=0;
function move()
{
   document.getElementById("lay").style.pixelTop=inlay+document.body.scrollTop;
}
window.onscroll=move;
//实现全部选取的功能
function selected(bool)
{
   var check=document.getElementsByName("head");
   for(var i=0;i<check.length;i++)
   {
       if(check[i].type="checkbox")
       {
          check[i].checked=bool;
       }
   }
}
function show(char)
{
   if(char=="隐藏")
   {
      document.getElementById("lay").style.display="none";
      document.getElementById("lay1").style.display="block";
      document.getElementById("lay2").style.display="none";
      document.getElementById("lay3").style.display="block";
   }
   if(char=="显示")
   {
       document.getElementById("lay").style.display="block";
       document.getElementById("lay1").style.display="none";
       document.getElementById("lay2").style.display="block";
       document.getElementById("lay3").style.display="none";
   }
}
function inis()
{
      document.getElementById("lay").style.display="block";
      document.getElementById("lay1").style.display="block";
      document.getElementById("lay2").style.display="none";
      document.getElementById("lay3").style.display="none";
}
</script>
<style type="text/css">

</style>
</head>

<body bgcolor="#666666" onload="inis()">
<div id="lay" style="position:absolute;
    left:19px;
    top:28px;
    width:178px;
    height:92px;
    z-index:1;
    background-image:url(images/qie.jpg)"></div>
    <form name="form">
    <table width="339" border="0" align="center" cellpadding="0" cellspacing="0">
     <tr>
    <td colspan="3" align="center">以下效果为学习</td>
  </tr>
  <tr>
    <td width="157" align="center"><input name="button" type="button" onclick="selected(true)" value="全  选"/>
      <br />
      <input type="button"  value="全不选" onclick="selected(false)"/></td><td width="94">类型</td>
    <td width="74">数量</td>
  </tr>
  <tr>
    <td><input type="checkbox"name="head"/></td>
    <td>西游记</td>
    <td>50.00</td>
  </tr>
  <tr>
    <td><input type="checkbox"name="head"/></td>
    <td>红楼梦</td>
    <td>100</td>
  </tr>
  <tr>
    <td colspan="3" align="center"><input type="button" name="btn" value="隐藏"  align="baseline" onClick="show('隐藏')"/>   
    <input type="button" name="btn" value="显示"  align="baseline" onClick="show('显示')"/>
  </tr>
</table>
    <br />
    </form>
    <div id="lay1" align="center"></div>
    <div id="lay2" align="center">帐号:
      <input type="text" name="name"/><br /><br />
        密码:<input type="password" name="pwd"/><br />
        <input type="button" name="btn" value="登陆"/>  <input type="button" name="btn" value="取消"/>
</div>
    <div id="lay3" align="center">这是层的显示和隐藏效果</div>
</body>
</html>

2008-08-16 17:24

computerkimi

来　自：江西
等　级：新手上路
帖　子：20
专家分：0
注　册：2008-8-16

第 4 楼

得分:0

谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function selected(bool)
{
   var check=document.getElementsByName("head");
   for(var i=0;i<check.length;i++)
   {
       if(check[i].type="checkbox")
       {
          check[i].checked=bool;
       }
   }
}
</script>
</head>

<body>
<form name="form">
    <table width="339" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="157" align="center"><input name="button" type="button" onclick="selected(true)" value="全  选"/>
      <br />
      <input type="button"  value="全不选" onclick="selected(false)"/>
      </td><td width="94">类型</td>
    <td width="74">数量</td>
  </tr>

  <tr>
    <td><input type="checkbox" name="head"/></td>
    <td>西游记</td>
    <td>50.00</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="head"/></td>
    <td>红楼梦</td>
    <td>100.00</td>
  </tr>
  </table>
   </form>
</body>
</html>
我只要这些就可以了。

2008-08-16 19:47

ice024

等　级：新手上路
帖　子：2
专家分：0
注　册：2008-8-10

第 6 楼

得分:0

如果用jQuery的话，可以用下面的代码：
前一个checkbox是一个选择的复选框，而后面的则是需要进行选择的复选框。代码很少应该很容易理解。
<script type="text/javascript">
$(function(){
$( 'thead :checkbox' ).click( function() {

$('tbody :checkbox').attr('checked',function() {
//console.log(this);
return $(this).attr( 'checked' ) ? '' : 'checked';
});

} );
} );

</script>

2008-08-17 14:56