JavaScript操作表单：文本域与单选多选按钮实例
63 浏览量
更新于2024-08-28
收藏 58KB PDF 举报
"本文是关于JavaScript操作表单的实例讲解下篇，主要涵盖了文本域和单选按钮、多选按钮的操作。通过示例代码详细解析了如何设置与获取文本域的值，以及如何处理单选按钮和多选按钮的选中状态。"
在Web开发中，JavaScript是一种常用的客户端脚本语言，它对于用户交互和动态网页内容更新有着重要作用。在表单处理方面，JavaScript可以提供强大的功能，如表单验证、数据操作等。本文将重点讨论JavaScript如何操作HTML中的文本域、单选按钮和多选按钮。
### 一、文本域
文本域通常用于用户输入文本信息，HTML中的表示方式是`<input type="text">`。在JavaScript中，我们可以使用`value`属性来设置或获取文本域的值。例如，假设有一个ID为`textInput`的文本域，你可以这样操作：
```javascript
var textArea = document.getElementById('textInput');
// 设置文本域的值
textArea.value = '新的文本';
// 获取文本域的值
var currentValue = textArea.value;
```
### 二、单选按钮和多选按钮
1. 单选按钮：HTML中的`<input type="radio">`用于创建单选按钮，用户只能选择其中一个选项。JavaScript中，`checked`属性用于检查或设置单选按钮是否被选中。例如：
```javascript
var radioButton = document.getElementById('myRadioButton');
// 检查单选按钮是否选中
if (radioButton.checked) {
console.log('选中');
} else {
console.log('未选中');
}
// 设置单选按钮选中状态
radioButton.checked = true; // 选中
radioButton.checked = false; // 未选中
```
2. 多选按钮：HTML中的`<input type="checkbox">`用于创建多选按钮，用户可以选择多个选项。`value`属性用于获取选中的多选按钮的值，但首先需要判断按钮是否被选中。例如：
```javascript
var checkboxes = document.getElementsByName('myCheckboxes');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
console.log('选中项：', checkboxes[i].value);
}
}
```
### 实例：全选/全不选/反选功能
以下是一个实现全选、全不选和反选功能的示例：
```html
<body>
<form name="myform" action="#" method="post" id="form1">
<!-- 创建20个复选框 -->
<script type="text/javascript">
for (var i = 0; i < 20; i++) {
document.write("<input type='checkbox' name='nums'/>" + (i + 1) + "<br>");
}
document.write("<input type='radio' name='radios'>全选");
document.write("<input type='radio' name='radios'>全不选");
document.write("<input type='radio' name='radios'>反选");
</script>
</form>
</body>
```
```javascript
<script type="text/javascript">
window.onload = function() {
var nums = document.getElementsByName("nums");
var radios = document.getElementsByName("radios");
// 处理全选、全不选、反选事件
for (var i = 0; i < radios.length; i++) {
radios[i].onclick = function() {
if (this.value == '全选') {
for (var j = 0; j < nums.length; j++) {
nums[j].checked = true;
}
} else if (this.value == '全不选') {
for (var j = 0; j < nums.length; j++) {
nums[j].checked = false;
}
} else if (this.value == '反选') {
for (var j = 0; j < nums.length; j++) {
nums[j].checked = !nums[j].checked;
}
}
};
}
};
</script>
```
这个例子中，当用户点击“全选”、“全不选”或“反选”按钮时，对应的复选框状态会被相应地改变。通过监听这些按钮的点击事件，并根据点击的按钮值执行不同的操作，实现了对所有复选框状态的控制。
通过上述内容，我们了解了如何使用JavaScript进行表单元素的交互操作，包括文本域的值设置与获取，以及单选按钮和多选按钮的选中状态控制。这些基本操作在实际项目中非常常见，熟练掌握它们能帮助开发者创建更加丰富和动态的用户界面。
Javascript操作表单实例讲解（下）操作表单实例讲解（下）
在上篇文章给大家介绍了js操作表单实例讲解(下)的相关知识，本文接着给大家介绍Javascript操作表单实例讲解（下），具体
详情如下所示：
一、文本域一、文本域
<input type="text" />
—————————–
操作文本域的值
value 属性 设置或者获取值
—————————–
二、单选按钮和多选按钮二、单选按钮和多选按钮
<input type="radio" />
<input type="checkbox" />
———————————————-
checked 返回或设置单选的选中状态
true 选中 false 未选中
value 属性 获取选中的值，必须先判断选中状态
———————————————-
example: 全选/全不选/反选
1.PNG
1.dom结构结构
<body>
<form name="myform" action="#" method="post" id="form1">
<script type="text/javascript">
for(var i=0;i<20;i++){
document.write("<input type='checkbox' name='nums' />"+(i+1)+"<br>" )
}
document.write("<input type='radio' name='radios'>全选");
document.write("<input type='radio' name='radios'>全不选");
document.write("<input type='radio' name='radios'>反选");
</script>
</form>
</body>
下载后可阅读完整内容，剩余3页未读，立即下载
2022-01-18 上传
2011-07-01 上传
2021-01-19 上传
2020-11-24 上传
2022-06-09 上传
2022-11-14 上传
2021-09-27 上传
2021-10-07 上传
2020-11-23 上传
weixin_38668672
- 粉丝: 6
- 资源: 907
我的内容管理
展开
最新资源
- IEEE 14总线系统Simulink模型开发指南与案例研究
- STLinkV2.J16.S4固件更新与应用指南
- Java并发处理的实用示例分析
- Linux下简化部署与日志查看的Shell脚本工具
- Maven增量编译技术详解及应用示例
- MyEclipse 2021.5.24a最新版本发布
- Indore探索前端代码库使用指南与开发环境搭建
- 电子技术基础数字部分PPT课件第六版康华光
- MySQL 8.0.25版本可视化安装包详细介绍
- 易语言实现主流搜索引擎快速集成
- 使用asyncio-sse包装器实现服务器事件推送简易指南
- Java高级开发工程师面试要点总结
- R语言项目ClearningData-Proj1的数据处理
- VFP成本费用计算系统源码及论文全面解析
- Qt5与C++打造书籍管理系统教程
- React 应用入门：开发、测试及生产部署教程
