zoukankan      html  css  js  c++  java
  • jquery获取和设置表单数据

    1.需求

    正好做到设置和获取表单数据的功能,做个整理

    2.计划安排

    3.计划实施

    1.获取值

    <!--1获取普通文本框的值-->
    <input type="text" id="a1"/>
    
    <!--btn-->
    <button id="submit">按钮</button>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $('#submit').click(function () {
            console.log($('#a1').val());
        })
    </script>
    <!--2.获取checkbox是否打勾-->
    <input type="checkbox" id="a1"/>
    
    <!--btn-->
    <button id="submit">按钮</button>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $('#submit').click(function () {
            //打勾返回true,没有打勾返回false
            console.log($('#a1').is(":checked"));
        })
    </script>
    <!--3.获取radio选中的value值-->
    <input type="radio" name="age" value="1"/>
    <input type="radio" name="age" value="2"/>
    <input type="radio" name="age" value="3"/>
    
    <!--btn-->
    <button id="submit">按钮</button>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $('#submit').click(function () {
            console.log($('input[name="age"]:checked').val());
        })
    </script>
    <!--4.获取选中的下拉框的值-->
    <select name="" id="select">
        <option value="1">111</option>
        <option value="2">222</option>
        <option value="3">333</option>
        <option value="4">444</option>
    </select>
    
    <!--btn-->
    <button id="submit">按钮</button>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $('#submit').click(function () {
            console.log($('#select').val());
           $("#childmodel").find("option:selected").text();
    }) </script>

    2.设置值

    <!--1设置普通文本框的值-->
    <input type="text" id="a1"/>
    
    <!--btn-->
    <button id="submit">按钮</button>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $('#a1').val(1111)
    </script>
    <!--2.设置checkbox打勾-->
    <input type="checkbox" id="a1"/>
    
    <!--btn-->
    <button id="submit">按钮</button>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $('#a1').attr('checked','checked');
    </script>
    <!--3.设置radio选中-->
    <input type="radio" name="age" value="1"/>
    <input type="radio" name="age" id="a2" value="2"/>
    <input type="radio" name="age" value="3"/>
    
    <!--btn-->
    <button id="submit">按钮</button>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $('#a2').attr('checked','checked');
    </script>
    <!--4.设置选中的下拉框的值-->
    <select name="" id="select">
        <option value="1">111</option>
        <option value="2">222</option>
        <option value="3">333</option>
        <option value="4">444</option>
    </select>
    
    <!--btn-->
    <button id="submit">按钮</button>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        //设置value=4的值为选中
       $('#select').val('4');
    //文本
    var prov = document.getElementById(id);
    for (var i = 0, len = prov.options.length; i < len; i++)
    if (prov.options[i].text==text)
    prov.selectedIndex = i;
    </script>

    4.总结 

    一些小东西总是容易忘,记录下来方便查找

  • 相关阅读:
    C++/CLI中的资源清理(Destructor,Finalizer
    c++/cli 之数据库操作
    利用139,189,yahoo等邮箱短信提示来免费发短信提示
    小例子复习下委托的应用
    c++/cli 之日志记录
    c++/cli 之异步Socket完成端口实例
    C++/CLI, Finalize and Dispose
    C/C++的位运算符操作
    实现自定义控件与背景图完全重叠
    RichTextBox与NotifyIcon简单模仿QQ效果
  • 原文地址:https://www.cnblogs.com/norm/p/6208253.html
Copyright © 2011-2022 走看看