美文网首页
5-4设置和获取表单的value值

5-4设置和获取表单的value值

作者: 大庆无疆 | 来源:发表于2019-03-16 13:38 被阅读0次
    方法:val()

    val()在select(选择框)中有特殊的作用

    <body>
        <input type="button" value="显示效果" id="btn"/>
        <input type="text" value="文本框" id="txt"/>
        <input type="radio" value="man" name="sex" id="rad" />男
        <input type="checkbox" value="1" id="ck" />吃饭
        <input type="submit" value="提交" id="sm" />
        <textarea name="" id="tt" cols="30" rows="10" value="你一定不帅">
        </textarea>
        <!-- 选择框 -->
        <select id="se">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">深圳</option>
        </select>
    
    
        <script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
        <script type="text/javascript">
            // ---------------------------------------------
            // 方法:val();
            
            // 页面加载事件
            $(function () {
                // 注册点击事件
                $('#btn').click(function () {
                    // ---------------------------获取value值--------------------
                    console.log($(this).val());//显示按钮的value属性值
                    console.log($("#txt").val());//显示文本框的value属性值
                    console.log($("#rad").val());//显示的单选框的value属性值
                    console.log($("#ck").val());//显示的是复选框的value属性值
                    console.log($("#sm").val());//显示的是提交按钮的value属性值
    
                    // ---------------------------设置value值--------------------
                    $(this).val("这是一个按钮妞");
                    $("#txt").val("我是一个开心的按钮");
                    $("#rad").val("这是单选");
                    $("#ck").val("兴趣来了");
                    $("#sm").val("这是sm按钮");
    
                    // ---------------------通过.val()也可以获取和设置textarea的值----------------
                    console.log($("#tt").text());
                    console.log($("#tt").text('我是谁'));
    
                    //--------------------val()在select中的使用-----------------
                    // 记得要先给select的每一项都添加value值
    
                    $('#se').val('2');  //点击按钮的时候,就会自动选中value值为2的项
                    console.log($('#se').val());    //输出2
                });
            });
        </script>
    </body>
    

    相关文章

      网友评论

          本文标题:5-4设置和获取表单的value值

          本文链接:https://www.haomeiwen.com/subject/sntsmqtx.html