Javascript操作表单实例讲解（下）

前端技术 2023/09/02 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>

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:单价*数量=总价

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:动态检测文本区域中输入的字符长度

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操作表单实例讲解（下），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/4666

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案