Create index.html

18996677975 · web-flow · commit c405c9e072a1 · 2020-02-15T20:12:35.000+08:00
diff --git a/HTML+JS实现一组复选框的全选、取消、反选/index.html b/HTML+JS实现一组复选框的全选、取消、反选/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>一组复选框的全选、取消、反选</title>
+    <script type="text/javascript">
+        // 全选函数
+        function selectAll() {
+            var chks = document.getElementsByName("chkHobby");
+            for (var i = 0; i < chks.length; i++)
+            {
+                chks[i].checked = true;
+            }
+        }
+
+        // 取消函数
+        function selectNone() {
+            var chks = document.getElementsByName("chkHobby");
+            for (var i = 0; i < chks.length; i++)
+            {
+                chks[i].checked = false;
+            }
+        }
+
+        // 反选函数
+        function selectReverse() {
+            var chks = document.getElementsByName("chkHobby");
+            for (var i = 0; i < chks.length; i++)
+            {
+                chks[i].checked = !chks[i].checked;
+            }
+        }
+    </script>
+</head>
+<body>
+    <form id="frm_1">
+        <fieldset>
+            <legend>爱好</legend>
+            <input type="checkbox" name="chkHobby" value="internet" />上网
+            <input type="checkbox" name="chkHobby" value="reading" />阅读
+            <input type="checkbox" name="chkHobby" value="games" />游戏
+            <input type="checkbox" name="chkHobby" value="sports" />运动
+            <input type="checkbox" name="chkHobby" value="shopping" />购物
+        </fieldset>
+        <input type="button" name="btn" value="全选" onclick="selectAll()" />
+        <input type="button" name="btn" value="反选" onclick="selectReverse()" />
+        <input type="button" name="btn" value="取消" onclick="selectNone()" />
+    </form>
+</body>
+</html>
