js html css implémente la sélection complète et la sélection inverse des cases à cocher-js tutoriel-php.cn

js html css implémente la sélection complète et la sélection inverse des cases à cocher

高洛峰

Libérer： 2017-02-06 13:02:37

original

1740 Les gens l'ont consulté

L'exemple de cet article partage avec vous la sélection complète de la case à cocher js et le code d'implémentation de la sélection inverse pour votre référence. Le contenu spécifique est le suivant

<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>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère que cela vous sera utile pour votre apprentissage, et j'espère que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles sur l'implémentation js html css de la sélection et de la désélection des cases à cocher, veuillez faire attention au site Web PHP chinois !