学习笔记——多选框的全选，全不选和反选

实现全选全不选和反选效果,实现比较简单，主要是利用到checked的属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description" content="" />
 </head>

 <body>
  <input type="checkbox" name="love">zuqiu</br>
    <input type="checkbox" name="love">zuqiu</br>
      <input type="checkbox" name="love">zuqiu</br>
        <input type="checkbox" name="love">zuqiu</br>
          <input type="checkbox" name="love">zuqiu</br>
          <input type="button" name="a1" value="全选 " onclick="test1()">
          <input type="button" name="a1" value="全不选" onclick="test2()">
          <input type="button" name="a1" value="反选" onclick="test3()">
<script type="text/javascript">
function test1()
{
    var loves=document.getElementsByName("love");
    for (i=0;i<loves.length ;i++ )
    {
        loves[i].checked=true;
    }
}

function test2()
{
    var loves=document.getElementsByName("love");
    for (i=0;i<loves.length ;i++ )
    {
        loves[i].checked=false;
    }
}
function test3()
{
    var loves=document.getElementsByName("love");
    for (i=0;i<loves.length ;i++ )
    {
        if(loves[i].checked==true){
        loves[i].checked=false;
        }else{
            loves[i].checked=true;
        }
    }
}
</script>
 </body>
</html>

posted on 2016-03-21 15:39  ShamSilence  阅读(218)  评论(0)  编辑  收藏  举报

导航