21、表单操作

来源：互联网发布：勇往直前歌词网络编辑：程序博客网时间：2024/06/04 01:24

1） .value 表单的值

2 ）.getElementsByName() 查找元素节点

3）在form里面，可以直接 .(name名) 去获取元素节点

4 ）checked 的 true 和 false

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title></title><style type='text/css'>*{margin:0px;padding:0px;}</style></head><body><form id="bd" action="#" method=""><input type="text" name="user" value="mmm" id="txt"></input><input type="password" name="password" id="pwd"></input><input type="radio" name='sex' value='8' checked='checked'/> 男 <!--checked='checked'代表默认被选中--><input type="radio" name='sex' value='9' /> 女</form><script type="text/javascript">/*//通过.value 读取和改变表单内的值var oTxt = document.getElementById("txt");alert(oTxt.value);oTxt.value = "user";alert(oTxt.value);*//*//在form里面，可以直接ByName 去获取元素节点var oSex = document.getElementsByName('sex');alert(oSex.length);//表单中有两个name为sex的元素节点，所以以类似数组的形式存储alert(oSex[0].value);alert(oSex[1].value);*//*//在form里面，可以直接.name去获取元素节点var oBd = document.getElementById("bd");alert(oBd.user.value);oBd.user.value="呵呵";alert(oBd.user.value);alert(oBd.sex[0].value);//表单中有两个name为sex的元素节点，所以以类似数组的形式存储,需要通过数组的形式操作oBd.sex[0].value="男";alert(oBd.sex[0].value);*/var oBd = document.getElementById("bd");alert(oBd.sex[0].checked);//弹出为布尔值alert(oBd.sex[0].getAttribute('checked'));//弹出为checked后的实际值oBd.sex[0].removeAttribute('checked');//移除默认选中属性oBd.sex[1].checked="checked";//加上默认选中属性  因为其实质为布尔值，所以只要不是 0  null  undefined  NaN  ''  都默认为真</script></body></html>

小案例:全选、全不选、反选操作

<!DOCTYPE HTML><html><head><title>please enter your title</title><meta charset="utf-8"><meta name="Author" content=""><style type='text/css'>*{ margin:0; padding:0;}</style></head><body><button id='b1'>全选</button><button id='b2'>反选</button><button id='b3'>全不选</button> <br /><input type="checkbox" />白菜<input type="checkbox" />牛肉<input type="checkbox" />包子<input type="checkbox" />猪肉<input type="checkbox" />黄瓜<input type="checkbox" />西瓜<input type="checkbox" />番茄<input type="checkbox" />土豆<script type="text/javascript">var oB1 = document.getElementById('b1');var oB2 = document.getElementById('b2');var oB3 = document.getElementById('b3');var aInput = document.getElementsByTagName('input');oB1.onclick = function(){for (var i=0;i<aInput.length;i++ ){aInput[i].checked = true;}};oB3.onclick = function(){for (var i=0;i<aInput.length;i++ ){aInput[i].checked = false;}};oB2.onclick = function(){for (var i=0;i<aInput.length;i++ ){aInput[i].checked = !aInput[i].checked;}};</script></body></html>

0 0