JavaScript学习记录总结（八）——全选、反选

2023-03-09 20:24:09

<!DOCTYPE html>
<html>
<head>
<title>checkboxs.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript">
//select 不行

function selects(value) {
       //获取所有的 name=fav的<input type="checkbox" name="fav" value="打架1"/>对象的集合
       var favsDom = document.getElementsByName("fav");
       if (value == 0) {
           for (var i = 0; i < favsDom.length; i++) {
               var favDom = favsDom[i];//获取具体的对象
               if (favDom.checked) {
                   favDom.checked = false;
               }
           }
       } else if (value == 1) {
           for (var i = 0; i < favsDom.length; i++) {
               var favDom = favsDom[i];//获取具体的对象
               if (!favDom.checked) {
                   favDom.checked = true;
               }
           }
       } else if (value == -1) {
           for (var i = 0; i < favsDom.length; i++) {
               var favDom = favsDom[i];//获取具体的对象
                favDom.checked = !favDom.checked;

           }
       }

}
</script>
</head>

<body>
   <div>
       <input type="checkbox" name="fav" value="打架1" />打架1<br /> <input
           type="checkbox" name="fav" value="打架2" />打架2<br /> <input
           type="checkbox" name="fav" value="打架3" />打架3<br /> <input
           type="checkbox" name="fav" value="打架4" />打架4<br /> <input
           type="checkbox" name="fav" value="打架5" />打架5<br /> <input
           type="checkbox" name="fav" value="打架6" />打架6<br />
   </div>

<div>
       <input type="button" id="qx" value="全选" onclick="selects(1)" /> <input
           type="button" id="fx" value="反选" onclick="selects(-1)" /> <input
           type="button" id="qbx" value="全不选" onclick="selects(0)" />
   </div>

</body>
</html>