提供 CheckBox 全选与取消全选程序

最新推荐文章于 2024-11-14 15:33:48 发布

casebest

最新推荐文章于 2024-11-14 15:33:48 发布

阅读量704

点赞数

分类专栏：代码整理文章标签： input function stylesheet html button javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/casebest/article/details/1858056

版权

代码整理专栏收录该内容

0 篇文章 0 订阅

订阅专栏

提供 CheckBox 全选与取消全选程序

方法一，check控件

<script language="JavaScript">
function chkall(input1,input2)
{
    var objForm = document.forms[input1];
    var objLen = objForm.length;
    for (var iCount = 0; iCount < objLen; iCount++)
    {
        if (input2.checked == true)
        {
            if (objForm.elements[iCount].type == "checkbox")
            {
                objForm.elements[iCount].checked = true;
            }
        }
        else
        {
            if (objForm.elements[iCount].type == "checkbox")
            {
                objForm.elements[iCount].checked = false;
            }
        }
    }
}
</script>

<form id="form1">
<input type="checkbox" value='全部選取' οnclick='chkall("form1",this)' name=chk><BR>
<input type="checkbox" name="item_001" value="1">1<BR>
<input type="checkbox" name="item_002" value="2">2<BR>
<input type="checkbox" name="item_003" value="3">3<BR>
<input type="checkbox" name="item_003" value="4">4
</form>

方法二，按钮

<html>
<head>
<script type="text/javascript">
function makeCheck(thisForm)
{
for (i = 0; i < thisForm.option.length; i++)
{
thisForm.option[i].checked=true
}
}

function makeUncheck(thisForm)
{
for (i = 0; i < thisForm.option.length; i++)
{
thisForm.option[i].checked=false
}
}
</script>
</head>
<body>

<form >
<input type="button" value="选择所有" >
<input type="button" value="清空选择" >
<br />
<input type="checkbox" >苹果<br />
<input type="checkbox" >橙子<br />
<input type="checkbox" >香蕉<br />
<input type="checkbox" >西瓜<br />
</form>

</body>
</html>

方法三

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>checked.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gb2312">

<script type="text/javascript">
    function checkAll(str){
     var a = document.getElementsByName(str);
     var n = a.length;

for(var i=0;i<n;i++){
      a[i].checked = window.event.srcElement.checked;
     }
    }

function checkItem(str){
     var e = window.event.srcElement;
     var all = eval("document.f1."+str);
     if(e.checked){
      var a = document.getElementsByName(e.name);
      all.checked = true;
      for(var i=0;i<a.length;i++){
       if(!a[i].checked){
        all.checked = false;
        break;
       }
      }
     }else{
      all.checked = false;
     }
    }
</script>
</head>

<body>
<form name="f1" id="f1" action="" method="post">
   <input type="checkbox" name="all" onClick="checkAll('mm')">
   ȫѡ
   <br />
   <input type="checkbox" name="mm" onClick="checkItem('all')">
   <br />
   <input type="checkbox" name="mm" onClick="checkItem('all')">
   <br />
   <input type="checkbox" name="mm" onClick="checkItem('all')">
   <br />
   <input type="checkbox" name="mm" onClick="checkItem('all')">
   <br />
   <input type="checkbox" name="mm" onClick="checkItem('all')">
   <br />
   <input type="checkbox" name="mm" onClick="checkItem('all')">
   <br />

   <input type="checkbox" id="checkbox1" name="all2"
    οnclick="checkAll('mm2')">
   ȫѡ
   <br />
   <input type="checkbox" name="mm2" onClick="checkItem('all2')">
   <br />
   <input type="checkbox" name="mm2" onClick="checkItem('all2')">
   <br />
   <input type="checkbox" name="mm2" onClick="checkItem('all2')">
   <br />
   <input type="checkbox" name="mm2" onClick="checkItem('all2')">
   <br />
   <input type="checkbox" name="mm2" onClick="checkItem('all2')">
   <br />
   <input type="checkbox" name="mm2" onClick="checkItem('all2')">
   <br />
</form>
</body>
</html>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。