使用jQuery操作input的value值

作者：小丑西瓜9 | 2024-02-18 21:40:19

踩

jquery获取input某个单选框的value值

表单控件是jQuery的重中之重，因为一旦牵扯到数据交互，就离不开form表单的使用，比如用户的登录注册功能等。

在进行操作input的value值的时候，主要使用jQuery的val()方法。

点击查看val()的使用方法

看如下代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function(){
        //一、获取值
            //1.获取单选框被选中的value值
            console.log($("input[type=radio]:checked").val());   
 
            // 2.复选框被选中的value，获取的是第一个被选中的值, 如果没有值，将显示on
            console.log($("input[type=checkbox]:checked").val());
 
            //3.下拉列表被选中的值
            var obj = $("#timespan option:selected")
                //获取被选中的值
            console.log(obj.val());
                // 获取文本
            console.log(obj.text())
 
        // 二、设置值
            //1.设置单选按钮和多选按钮被选中项
            $("input[type=radio]").val(["1"]);
            $("input[type=checkbox]").val(["sleep", "play"]);
 
            //2.设置下拉列表框的选中值，必须使用select
            //因为option只能设置单个值，当给select标签设置multiple， 那么我们设置多个值，就没有办法了。
            //但是使用select设置单个值和多个值都可以。
            $("selct").val(["2", "3"]);
 
            //3. 设置文本框的value值
            $("input[type=text]").val("this is a test."); 
        })
    </script>
</head>
<body>
    <form action="javascript:void(0)">
        <input type="radio" name="sex" value="1" />男
        <!-- 设置checked属性表示选中当前选项 -->
        <input type="radio" name="sex" value="0" checked=""/>女
        
        <input type="checkbox" name="eat" value="eat" checked=""/>吃饭
        <input type="checkbox" name="sleep" value="sleep"/>睡觉
        <input type="checkbox" name="play"  value="play" checked="" />打豆豆
 
        <!-- 下拉列表 option标签内设置selected属性 表示选中当前 -->
        <select name="timespan" id="timespan" class="Wdate">
            <option value="1">8:00-8:30</option>
            <option value="2" selected="">8:30-9:00</option>
            <option value="3">9:00-9:30</option>
        </select>
 
        <input type="text" name="" id="" value="请输入">
    </form>
</body>
</html>

转载于:https://www.cnblogs.com/yang-wei/p/9534521.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/110742?site