JavaScript贯彻全选拔消效果

您可能感兴趣的文章:

  • 比较全的JS
    checkbox全选、取消全选、删除功能代码
  • Javascript实现CheckBox的全选与取消全选的代码
  • js
    multiple全选与取消全选实现代码
  • javascript
    全选/反选,取消选择效果
  • JS小功能(checkbox实现全选和全取消)实例代码
  • js实现复选框的全选和取消全选效果
  • javascript
    全选与全取消功能的实现代码
  • 金沙js333娱乐场 ,CheckBox为CheckBoxList实现全选或全取消选择(js代码实现)
  • JS控件ASP.NET的treeview控件全选或者取消(示例代码)
  • JavaScript实现全选取消效果

点击全选反选取消就是相应的效果:

<html>
<head>
 <meta charset=" utf-8">
 <meta name="author" content="http://hovertree.com/" />
 <title>JS实现复选框的全选和取消全选 - 何问起</title><base target="_blank" />
 <style type="text/css">
  li {
   list-style-type: none;
   font-size: 12px;
   color: blue;
   width: 300px;
   height: 20px;
   line-height: 20px;
  }
  a {
   width: 200px;
   height: 20px;
   float: left;
  }
  .ck {
   float: left;
   width: 26px;
  }
  .time {
   color: red;
   width: 60px;
   height: 20px;
   float: right;
  }
  .dohovertree {
   font-size: 12px;
  }
 </style>
 <script type="text/javascript">
window.onload=function()
{
 var checkboxs=document.getElementsByName("myHove"+"rTreechk");
 var hvtck=document.getElementById("hvtck");
 cklen=checkboxs.length;
 hvtck.onclick=function()
 {
 if(this.checked==true)
 {
  for(var i=0;i<cklen;i++)
  {
  checkboxs[i].checked=true;
  }
  document.getElementById("dohovert"+"ree").innerHTML="取消"
 }
 else
 {
  for(var i=0;i<cklen;i++)
  {
  checkboxs[i].checked=false;
  }
  document.getElementById("dohovertree").innerHTML="全选"
 }
 }
}
 </script>
</head>
<body>
 <h3>JS实现复选框的全选和取消全选 何问起</h3>
 <div style="width:736px">
  <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">更多特效</a> <a href="http://hovertree.com/hvtart/bjae/91eqf5ge.htm">原文</a>
 </div>
 <div>
  <ul>
   <li>
    <input type="checkbox" name="myHoverTreechk" />
    <a href="http://hovertree.com/">何问起欢迎您</a>
    2014-12-13
   </li>
   <li>
    <input type="checkbox" name="myHoverTreechk" />
    <a href="http://hovertree.com/hvtart/bjae/91eqf5ge.htm">大家好,好久不见了</a>
    2015-12-03
   </li>
   <li>
    <input type="checkbox" name="myHoverTreechk" />
    <a href="http://hovertree.com/menu/javascript/">何问起JS</a>
    2015-11-13
   </li>
  </ul>
  <div>
   <input type="checkbox" id="hvtck" />
   全选
  </div>
 </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

一、通过下面两个语句分别获取要选取的复选框对象集合和要点击的复选框对象:

本文实例为大家分享了js复选框的全选和取消全选的具体代码,供大家参考,具体内容如下

金沙js333娱乐场 1

二、为myck对象绑定onclick事件处理函数。事件处理函数事先判断hvtck对象是否被选中,如果被选中的话,则遍历复选框,挨个取消选中状态,并且通过document.getElementById(“dohovertree”).innerHTML=”取消”将dohovertree元素中的文本设置为取消,else语句中的原理是一样的,这里就不重复介绍了。

直接复制代码可用。

效果如下:

在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此功能,代码实例如下:

发表评论

电子邮件地址不会被公开。 必填项已用*标注