Javascript操作表单实例讲解(下)


Posted in Javascript onJune 20, 2016

在上篇文章给大家介绍了js操作表单实例讲解(下)的相关知识,本文接着给大家介绍Javascript操作表单实例讲解(下),具体详情如下所示:

一、文本域

<input type="text" />

-----------------------------
操作文本域的值
value 属性 设置或者获取值
-----------------------------

二、单选按钮和多选按钮

<input type="radio" />
<input type="checkbox" />

----------------------------------------------
checked 返回或设置单选的选中状态
true 选中 false 未选中

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

----------------------------------------------

example: 全选/全不选/反选

Javascript操作表单实例讲解(下)

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>

2.script脚本

2.1 采用调用函数的方式

<script type="text/javascript">
window.onload=function(){
var nums=document.getElementsByName("nums");
var radios=document.getElementsByName("radios");
fun(nums,i,radios);
function fun(a,b,c){
c[b].onclick=function(){
if(b==0){
for(var i=0;i<a.length;i++){
a[i].checked=true;
}
}else if(b==1){
for(var i=0;i<a.length;i++){
a[i].checked=false;
}
}else if(b==2){
for(var i=0;i<a.length;i++){
if(a[i].checked){
a[i].checked=false;
}else{
a[i].checked=true;
}
}
}
}
}
</script>

2.2 采用在比闭包中创建匿名函数的方式

<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++){
(function(a){
radios[a].onclick=function(){
if(a==0){
for(var i=0;i<nums.length;i++){
nums[i].checked=true;
}
}else if(a==1){
for(var i=0;i<nums.length;i++){
nums[i].checked=false;
}
}else if(a==2){
for(var i=0;i<nums.length;i++){
if(nums[i].checked){
nums[i].checked=false;
}else{
nums[i].checked=true;
}
}
}
} 
})(i);
}
}
</script>

三、下拉框

<form name="myform">
<select name="sels">
<option>北京大学</option>
<option>长安大学</option>
<option>南京大学</option>
</select>
</form>

----------------------------------------

selected 设置或返回下拉框的选中状态

true 选中 false 未选中

selectedIndex 设置或返回下拉框选中的索引号

----------------------------------------

example1:选中长安大学

<script>
var sels=document.myform.sels;
//var sels=document.myform.sels.options;//(也可以)
sels[1].selected=true;
</script>

或者

<script>
var sels=document.myform.sels;
// var sels=document.myform.sels.options;//(也可以)
sels.selectedIndex=1;
</script>

example2:单价*数量=总价

Javascript操作表单实例讲解(下)

1.PNG

1.dom结构

<body>
<form name="myform" action="#" method="post" id="form1">
单价:<input type="text" name="price" value="200">
<select name="count">数量
<option>1个</option>
<option>2个</option>
<option>3个</option>
</select>
总价:<input type="text" name="total" value="200">
</form>
</body>

2.script脚本

<script type="text/javascript">
window.onload=function(){
var price=document.myform.price;
var count=document.myform.count;
var total=document.myform.total;
count.onchange=function(){ 
total.value=parseInt(price.value)*(count.selectedIndex+1); 
}
} 
</script>

四、文本区域

<textarea name="info" rows="7" cols="60"></textarea>

----------------------------

value 返回或设置文本区域的值
----------------------------

example:动态检测文本区域中输入的字符长度

Javascript操作表单实例讲解(下)

1.PNG

1.dom结构:

<body>
<div id="content">一共能输入20个字符,已输入0个,还能输入20个</div>
<form name="myform" action="#" method="post" id="form1">
<textarea name="info" cols="60" rows="7"></textarea>
</form>
</body>

2.script脚本:

<script type="text/javascript">
window.onload=function(){
var content=document.getElementById("content");
var info=document.myform.info;
info.onkeyup=info.onkeydown=function(){
var str=info.value;
var length=check(str);
var strs=20;
if (length<=strs) {
content.innerHTML="一共能输入"+strs+"个字符,已输入"+length+"个,还能输入"+(strs-length)+"个";
}else{
info.value=str.substring(0,strs);
} 
}
//检测中英文
function check(str){
var num=0;
for(var i=0;i<str.length;i++){
if(str.charCodeAt(i)>=0 && str.charCodeAt(i)<=255){//英文
num++;
}else{//中文
num+=2;
}
}
return num;
}
}
</script>

五、表单验证

onsubmit 当表单提交的时候触发的事件

----------------------------------------------------------------------------------------------

<form name="myform" action="www.baidu.com" method="post" onsubmit="return check(this)"></form>
return false; //阻止表单默认行为

----------------------------------------------------------------------------------------------

六、submit方法

该方法用来实现自动提交

而事件onsubmit只能用来手动提交

以上所述是小编给大家介绍的Javascript操作表单实例讲解(下),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的对象化编程
Jan 16 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 #Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 #Javascript
JavaScript操作表单实例讲解(上)
Jun 20 #Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 #Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 #Javascript
使用jQuery给input标签设置默认值
Jun 20 #Javascript
js中获取时间new Date()的全面介绍
Jun 20 #Javascript
You might like
解析php中heredoc的使用方法
2013/06/17 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
php画图实例
2014/11/05 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
Js+XML 操作
2006/09/20 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
WebPack基础知识详解
2017/01/16 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
python 线程的五个状态
2020/09/22 Python
根叔历年演讲稿
2014/05/20 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
Java设计模式之享元模式示例详解
2022/03/03 Java/Android
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技