首页 | IT新闻 | 硬件 | 操作系统 | 开发 | 网络编程 | 数据库 | 热门框架 | 网络安全 | 组网 | 建站指南 | 网页制作 | 特效 | 实用技巧 | 服务器 | 办公 | QQ | 探索 | 社区

  • 技术部落
  • 部落首页 > 网络编程 > JavaScript > 正文
  • 用JS实现网站复选框的全选和取消功能
      2008-5-20  来源:技术部落  编辑:Jsbulo  热度:

      有时候在网站制作时需要用到复选框来标记选择,当选择项目非常多的时候一项一项地去选择就显得比较麻烦,这时候我们肯定就会想到增加复选框的全选和取消功能,那么部落就在这里给出实现这个功能的具体代码,以便大家学习交流使用。

      代码如下:

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    var checkflag = "false";
    function check(field) {
    if (checkflag == "false") {
    for (i = 0; i < field.length; i++) {
    field[i].checked = true;}
    checkflag = "true";
    return "false"; }
    else {
    for (i = 0; i < field.length; i++) {
    field[i].checked = false; }
    checkflag = "false";
    return "true"; }
    }
    //  End -->
    </script>
    <table width="210" border="0" cellspacing="0" cellpadding="0">
    <Form name="FORM1" method="post">
      <tr>
        <td><input type="checkbox" onClick="this.value=check(FORM1.checkbox1)">全选/取消</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="checkbox1" value="1">
        <a href="http://www.jsbulo.com">技术部落(Jsbulo.com)</a></td>
      </tr>
      <tr>
        <td><input type="checkbox" name="checkbox1" value="2">
        <a href="http://www.jsbulo.com">技术部落(Jsbulo.com)</a></td>
      </tr>
      <tr>
        <td><input type="checkbox" name="checkbox1" value="3">
        <a href="http://www.jsbulo.com">技术部落(Jsbulo.com)</a></td>
      </tr>
      <tr>
        <td><input type="checkbox" name="checkbox1" value="4">
        <a href="http://www.jsbulo.com">技术部落(Jsbulo.com)</a></td>
      </tr>
      <tr>
        <td><input type="checkbox" name="checkbox1" value="5">
        <a href="http://www.jsbulo.com">技术部落(Jsbulo.com)</a></td>
      </tr>
    </Form>
    </table>