JavaScript-对表单元素进行设置

作者: 测试探索 | 来源:发表于2022-06-20 19:30 被阅读0次

JavaScript-对表单元素进行设置
CSS 伪类和伪元素
Ant Design table设置自定义排序表头和对字段进行隐
我的工作流设计
队列(Queue)
javascript-对表单的操作
居中大法
css-元素垂直居中的6种方法
JavaScript DOM操作（二）
javascript-节点的增、删、改、查

一、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