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
Feb 25 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
JavaScript实现商品评价五星好评
Nov 30 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
两个php日期控制类实例
2014/12/09 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
详解Python中find()方法的使用
2015/05/18 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
python os.path模块常用方法实例详解
2018/09/16 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
ipad上运行python的方法步骤
2019/10/12 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
股东授权委托书
2014/10/15 职场文书
交通事故责任认定书
2015/08/06 职场文书
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS