search

Home >Web Front-end >JS Tutorial >js html css implements full selection and inverse selection of check boxes

js html css implements full selection and inverse selection of check boxes

高洛峰
高洛峰Original
2017-02-06 13:02:371768browse

本文实例为大家分享了js复选框全选与反选实现代码，供大家参考，具体内容如下

<html>
 <head>
 <title>html+css+js实现复选框全选与反选</title>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <meta name="keywords" content="js,笔试题目" />
 <style type="text/css">
  table,tr,td
  {
  border:1px solid red;
  }
 </style>
 <script type="text/javascript">
  function quanxuan()
  {
  for(var i=1;i<=3;i++)
  {
   var cbox_id="cb"+i;
   var cbox=document.getElementById(cbox_id);
   //alert(cbox.value);
   if(document.getElementById("cb_quanxuan").checked)
   cbox.checked=true;
   else
   cbox.checked=false;;
  }
  }
  function fanxuan()
  {
  for(var i=1;i<=3;i++)
  {
   var cbox_id="cb"+i;
   var cbox=document.getElementById(cbox_id);
   if(document.getElementById("cb_fanxuan").checked)
   {//选中反选框
   if(cbox.checked)
    cbox.checked=false;
   else
    cbox.checked=true;
   }
   else
   {
   if(cbox.checked)
    cbox.checked=false;
   else
    cbox.checked=true;
   }
  }
  }
 </script>
  
 </head>
 <body>
 <form id="form1">
  <table>
  <tr>
   <td><input type="checkbox" id="cb_quanxuan" onclick="quanxuan()" />全选</td>
   <td>复选框全选案例</td>
   <td> </td>
   <td> </td>
  </tr>
   
  <tr>
   <td><input type="checkbox" id="cb1" value="1" />1</td>
   <td>我是傻逼1</td>
   <td> </td>
   <td> </td>
  </tr>
   
  <tr>
   <td><input type="checkbox" id="cb2" value="2" />2</td>
   <td>我是傻逼2</td>
   <td> </td>
   <td> </td>
  </tr>
   
  <tr>
   <td><input type="checkbox" id="cb3" value="3" />3</td>
   <td>我是傻逼3</td>
   <td> </td>
   <td> </td>
  </tr>
   
  <tr>
   <td><input type="checkbox" id="cb_fanxuan" onclick="fanxuan()" />反选</td>
   <td>反选案例</td>
   <td> </td>
   <td> </td>
  </tr>
  </table>
 </form>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

更多js html css实现复选框全选与反选相关文章请关注PHP中文网！

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JQuery implements the encapsulation of selecting and inverting the selection of all check boxes in the listNext article：JQuery implements the encapsulation of selecting and inverting the selection of all check boxes in the list

Related articles

See more