• 常用表单操作

    一、select：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="select" value="B" class="select" name="selectName">
    <!--<option selected value="">请选择</option>-->
    <option value="A" url="http://www.baidu.com">第一个option</option>
    <option value="B" url="http://www.qq.com">第二个option</option>
    <!--<option value="B" url="http://www.qq.com" selected = "selected">第二个option</option>-->
</select>

<select class="select" value="B" name="selectName">
    <!--<option selected value="">请选择</option>-->
    <option value="C" url="http://www.163.com">第三个option</option>
    <option value="D" url="http://www.tmall.com">第四个option</option>
    <!--<option value="B" url="http://www.qq.com" selected = "selected">第二个option</option>-->
</select>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
    //$("#select").val("B");//设置默认值
    //$("#select option:first").prop("selected", 'selected');//默认选中第一项
    $("#select").change(function(){
        var options=$("#select option:selected"); //获取选中的项
        console.log(options.val()); //拿到选中项的值
        console.log(options.text()); //拿到选中项的文本
        console.log(options.attr('url')); //拿到选中项的url值
        if(options.val()==''){
            alert('为空');
            return;
        }
    }); //为Select添加事件，当选择其中一项时触发
</script>
</body>
</html>

    如何获得select当前被选中option的值：

    1、JavaScript原生的方法

    (1)拿到select对象： 

    var myselect=document.getElementById(“test”);

    (2)拿到选中项的索引：

    var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index

    (3)拿到选中项options的value： 

    myselect.options[index].value;

    (4)拿到选中项options的text： 

    myselect.options[index].text;
    <select id="example" name="selectName">
    <option value='1' id="a">项目1</option>
    <option value='2' id="b">项目2</option>
    <option value='3' id="c">项目3</option>
    <option value='4' id="d">项目4</option>
    <option value='5' id="e">项目5</option>
</select>

<script type=text/javascript>
document.getElementById("example").onchange = function(){
    console.log(this.options[this.selectedIndex].value);
}
</script>

    2、jQuery方法（前提是已经加载了jquery库）

    var options=$(“#test option:selected”); //获取选中的项

alert(options.val()); //拿到选中项的值

alert(options.text()); //拿到选中项的文本
    <select id="example" name="selectName">
    <option value='1' id="a">项目1</option>
    <option value='2' id="b">项目2</option>
    <option value='3' id="c">项目3</option>
    <option value='4' id="d">项目4</option>
    <option value='5' id="e">项目5</option>
</select>

<script type=text/javascript>
$("#example").change(function(){
    console.log($("#example option:selected").val());
})
</script>

     如何获取select中的所有值：

    1、JavaScript原生的方法：

    <select id="example">
    <option value='1' id="a">项目1</option>
    <option value='2' id="b">项目2</option>
    <option value='3' id="c">项目3</option>
    <option value='4' id="d">项目4</option>
    <option value='5' id="e">项目5</option>
</select>

<script type=text/javascript>
var example = document.getElementById("example");
var len = example.options.length;
for(var i = 0; i<len; i++){
    console.log(example.options[i].text);
}
</script>

    2、jQuery方法（前提是已经加载了jquery库）

    <select id="example" name="selectName">
    <option value='1' id="a">项目1</option>
    <option value='2' id="b">项目2</option>
    <option value='3' id="c">项目3</option>
    <option value='4' id="d">项目4</option>
    <option value='5' id="e">项目5</option>
</select>

<script type=text/javascript>
    $("#example option").each(function(){
        console.log($(this).val());
    });
</script>

    设置某项默认被选中： 

    html中：

    <option selected value="">请选择</option>
<option value="A" url="http://www.baidu.com">第一个option</option>
<option value="B" url="http://www.qq.com">第二个option</option>
<!--<option value="B" url="http://www.qq.com" selected = "selected">第二个option</option>-->

    代码中：

    <select id="example" name="selectName">
    <option value='1' id="a">项目1</option>
    <option value='2' id="b">项目2</option>
    <option value='3' id="c">项目3</option>
    <option value='4' id="d">项目4</option>
    <option value='5' id="e">项目5</option>
</select>

<script type=text/javascript>
$("#example").val(1);
//document.getElementById("example").value = 3;
//$("#select option:first").prop("selected", 'selected');//默认选中第一项
</script>

    二、radio：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<label><input type="radio" name="sex" value="m" checked>男</label><!-- 设置默认选中 -->
<label><input type="radio" name="sex" value="f">女</label>

<button onclick="getSelectValue()">get Select</button>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
    //第三方按钮点击
    function getSelectValue(){
        var val = $('input[name="sex"]:checked').val();
        alert("选中的radio的值是：" + val);
    }

    //自身值改变
    $('input[type=radio][name=sex]').change(function() {

        if (this.value == 'm') {
            alert("我是男性！");
        }
        else if (this.value == 'f') {
            alert("我是女性！");
        }
    });

    //点击自身
    $('input[type=radio][name=sex]').click(function() {
        if ($(this).is(':checked')) {
            alert($(this).val() + '被选中！');
        }
        if (this.value == 'm') {
            alert("我是男性！");
        }
        else if (this.value == 'f') {
            alert("我是女性！");
        }
    });
</script>
</body>
</html>

     根据值选中radio组中某一项：

    <input type="radio" value="1" checked="checked" name="group1" />radio1 
<input type="radio" value="2" name="group1" />radio2 
<input type="radio" value="3" name="group1" />radio3
    var value = "2";
$(":radio[name='group1'][value='" + value + "']").prop("checked", "checked");

    三、checkbox：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input class="subject" name='subject' type="checkbox" value="Chinese" id="Chinese" /><label>语文</label>
<input class="subject" name='subject' type="checkbox" checked value="Math" id="Math"/><label>数学</label>
<input class="subject" name='subject' type="checkbox" checked="checked" value="English"/><label>英语</label>
<input class="subject" name='subject' type="checkbox" value="Sport"/><label>体育</label>

<button id="button1">get Select</button>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
    //判断checkbox 是否选中
    alert($("#Math").is(":checked"));//选中，返回true，没选中，返回false

    //设置checkbox为选中状态
    $("#Chinese").prop("checked",true);

    //设置checkbox为不选中状态
    $("#id").prop("checked",false);

    $(".subject").click(function(){
        if($(this).is(":checked")){
            alert($(this).val() + '被选中了');
        }
    });

    //获取选中项的值
    $("#button1").click(function(){
        //$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')
        //意思是选择被选中的checkbox
        $.each($('.subject:checked'),function(){
            alert("你选了："+
                $('.subject:checked').length+"个，其中有："+$(this).val());
        });
    });
</script>
</body>
</html>
  • 相关阅读:
    如何禁用事件的浮升（div的子元素的点击事件会触发父元素的点击事件）
    如何用Ajax加载服务器的图片
    MyBaits一对一的查询方法
    WEB编程中获取src目录下的文件（没有src目录）
    Vs code背景图
    JS正则表达式
    宏任务和微任务：setTimeout和Promise执行顺序
    MySql操作(一)
    Js 运行机制和Event Loop
    浅拷贝与深拷贝
  • 原文地址：https://www.cnblogs.com/samve/p/10835697.html
Copyright © 2020-2023  润新知