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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
JS高级笔记
Jul 13 Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
微信开发 微信授权详解
Oct 21 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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 mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
基于python select.select模块通信的实例讲解
2017/09/21 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
Shell如何接收变量输入
2016/08/06 面试题
EJB的几种类型
2012/08/15 面试题
幼儿园长自我鉴定
2013/10/17 职场文书
班会关于环保演讲稿
2013/12/29 职场文书
单位工作证明书格式
2014/10/04 职场文书
2015年人力资源工作总结
2015/04/08 职场文书