JavaScript-对表单元素进行设置
2022-06-20 本文已影响0人
测试探索
一、onclick单击事件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type = "text/javascript" src="index.js"></script>
</head>
<body>
<form>
<label>用户名</label>
<input type = "text" id="userName" name="userName" value="1234"/>
<input type = "button" id = "btn" onclick="show1()" value="btn"/>
</form>
</body>
</html>
index.css
function show1(){
// alert("123456");
document.getElementById("userName").value = "999";
}
image.png
二、onload刷新事件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type = "text/javascript" src="index.js"></script>
</head>
<body onload="show1()">
<form>
<label>用户名</label>
<input type = "text" id="userName" name="userName" value="1234"/>
<input type = "button" id = "btn" onclick="show1()" value="btn"/>
</form>
</body>
</html>
index.js
function show1(){
document.getElementById("userName").value = "999";
}
image.png
三、单选按钮事件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type = "text/javascript" src="index.js"></script>
</head>
<body>
<form>
<input type = "text" id="userName" name="userName" value="1234"/><br>
<!--默认选中男-->
<input type = "radio" name = "xb" value = "1" checked = "checked">男
<input type = "radio" name = "xb" value = "0">女<br>
<input type = "button" id = "btn" onclick="show1()" value="btn"/>
</form>
</body>
</html>
index.js
function show1(){
// alert("123456");
// document.getElementById("userName").value = "999";
var xb = document.getElementsByName("xb");
var xbText;
//判断第0位置的单选按钮，是否被选中
if(xb[0].checked){
xbText = xb[0].value;
}else{
xbText = xb[1].value;
}
alert(xbText);
}
image.png
四、复选框事件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type = "text/javascript" src="index.js"></script>
</head>
<body onload="ymd()">
<form>
<select name="yyyy" id = "yyyy"></select>年
<select name="mm" id = "mm" onchange="seletYmd()"></select>月
<select name="dd" id = "dd"></select>日
</form>
</body>
</html>
index.css
function ymd(){
var yyyy = document.getElementById("yyyy");
var mm = document.getElementById("mm");
var dd = document.getElementById("dd");
var date = new Date();
var year = parseInt(date.getFullYear());
initSelect(yyyy,1999,year);
initSelect(mm,1,12);
initSelect(dd,1,31);
//获取年列表框的长度
var n = yyyy.length;
//列表框选中中间的条目
yyyy.selectedIndex = Math.round(n/2)
//把日列表框，长度设为0，起到删除的效果
// dd.options.length = 0
}
//给列表框赋值，传递三个参数：表单元素，开始值，结束值
function initSelect(obj,start,end) {
for(var i=start;i<=end;i++){
obj.options.add(new Option(i,i));
}
}
function seletYmd(){
var yyyy = document.getElementById("yyyy");
var mm = document.getElementById("mm");
var dd = document.getElementById("dd");
var m = parseInt(mm.value);
var dayEnd;
if(m == 4 || m == 6 ||m == 9 || m ==11){
dayEnd = 30;
}else if(m==2){
dayEnd = 28;
}else{
dayEnd = 31;
}
dd.options.length = 0
initSelect(dd,1,dayEnd)
}
image.png
4-1:复选框中，删除列表框某一个元素
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type = "text/javascript" src="index.js"></script>
</head>
<body onload="ymd()">
<form>
<select name="yyyy" id = "yyyy"></select>年
<select name="mm" id = "mm" onchange="seletYmd()"></select>月
<select name="dd" id = "dd"></select>日
<input type = "button" value = "删除列表框条目" onclick="
deleteSelect()">
</form>
</body>
</html>
index.css
function ymd(){
var yyyy = document.getElementById("yyyy");
var mm = document.getElementById("mm");
var dd = document.getElementById("dd");
var date = new Date();
var year = parseInt(date.getFullYear());
initSelect(yyyy,1999,year);
initSelect(mm,1,12);
initSelect(dd,1,31);
//获取年列表框的长度
var n = yyyy.length;
//列表框选中中间的条目
yyyy.selectedIndex = Math.round(n/2)
//把日列表框，长度设为0，起到删除的效果
// dd.options.length = 0
}
//给列表框赋值，传递三个参数：表单元素，开始值，结束值
function initSelect(obj,start,end) {
for(var i=start;i<=end;i++){
obj.options.add(new Option(i,i));
}
}
function seletYmd(){
var yyyy = document.getElementById("yyyy");
var mm = document.getElementById("mm");
var dd = document.getElementById("dd");
var m = parseInt(mm.value);
var dayEnd;
if(m == 4 || m == 6 ||m == 9 || m ==11){
dayEnd = 30;
}else if(m==2){
dayEnd = 28;
}else{
dayEnd = 31;
}
dd.options.length = 0;
initSelect(dd,1,dayEnd);
}
//删除列表框的某一个条目，即：按索引号删除
function deleteSelect(){
var dd = document.getElementById("dd");
dd.options.remove(1);
}
image.png
