JavaScript操作表单：文本域与单选多选按钮实例

122 浏览量更新于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">  <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操作表单实例讲解（下），具体

详情如下所示：

一、文本域一、文本域

—————————–

操作文本域的值

value 属性设置或者获取值

—————————–

二、单选按钮和多选按钮二、单选按钮和多选按钮

———————————————-

checked 返回或设置单选的选中状态

true 选中 false 未选中

value 属性获取选中的值，必须先判断选中状态

———————————————-

example: 全选/全不选/反选

1.PNG

1.dom结构结构

<body>

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页未读，立即下载

weixin_38668672

粉丝: 6
资源: 907

JavaScript操作表单：文本域与单选多选按钮实例

JavaScript教程及实例讲解(2021-2022) 生动简洁安全实用

JavaScript正则表达式实例与表单验证教程

JavaScript实现外观与表单验证：DOM操作与实例

JavaScript操作表单实例讲解(上)

javascript表单控件实例讲解

javascript表单控件实例讲解.docx

JavaScript教程及实例讲解

javaScript教程及实例讲解

JavaScript教程及实例讲解.doc

WEB_JavaScript教程及实例讲解.pdf

最新资源