用javascript实现简单的表单

最新推荐文章于 2023-02-03 10:00:00 发布

傻她你呀

最新推荐文章于 2023-02-03 10:00:00 发布

阅读量1.5k

点赞数

分类专栏： javascript 文章标签： javascript 勾选勾选按钮 checkedBox button

本文链接：https://blog.csdn.net/qq_41672008/article/details/86555280

版权

本文展示了如何使用JavaScript实现HTML表单的全选、全不选、反选和提交功能。通过监听按钮点击事件，动态改变复选框的checked状态，并在提交时显示选中的项。

摘要由CSDN通过智能技术生成

表单的按钮分别为全选，全不选，反选，提交，分别实现相应的功能，并且有很详细的注释

以下是代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script type="text/javascript">

           window.onload = function(){

               //1.checkedAllBtn(全选)
               /*
               *   全选按钮
               *        点击按钮以后,四个选择框全都被选中
               *
               */
               var checkedAllBtn = document.getElementById("checkedAllBtn");

               //获取四个选择框的对象
               var items = document.getElementsByName("items");

               checkedAllBtn.onclick = function(){

                   //当单击事件触发的时候,四个选择框都要选中
                   /*
                   *   对象.checked属性
                   *        如果是选中状态，返回true
                   *        如果是未选中状态，返回false
                   *    也可以对checked属性进行设置，把它设置成选中和未选中状态
                   *
                   */
                   for(var i=0 ; i<items.length ; i++){
                       items[i].checked = true;