JavaScript操作form表单元素(单选框复选框)

最新推荐文章于 2023-07-15 16:58:26 发布

原来是小柒

最新推荐文章于 2023-07-15 16:58:26 发布

阅读量2.9k

点赞数

分类专栏：笔记 JavaScript 前端学习

本文链接：https://blog.csdn.net/qq_42711899/article/details/104212565

版权

本文介绍了如何使用JavaScript操作HTML form表单中的复选框，包括通过name属性获取复选框数组实现全选和反选功能。在实现过程中，作者指出常见错误是混淆了getElementById()与getElementsByName()方法。正确使用这些方法可以按需选择或取消选择多个复选框。

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

通过input就可以将一个简单的复选框呈现在页面上
复选框为checkbox对象

<input type="checkbox" name="fav" id="fav" value="" />  <br/>

全选
因为要得到复选框数组，而id又不能重复。所以通过name来得到复选框数组。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同

反选
同样的方法得到复选框数组，遍历的时候判断如果checked值为true则改为false，checked值为false则改为true

要实现的页面大概如下：

在这里插入图片描述

<html>
    <head>
        <title>操作表单元素</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--声明js代码域-->
        <!---
        js操作多选框，单选框
        被选中状态下js中的checked属性值为true;未选中状态下为flase
        js操作下拉框，