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.总结 

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

  • 相关阅读:
    TensorFlow学习('utf-8' codec can't decode byte 0xff in position 0: invalid start byte)
    Python常用库之三:Matplotlib
    线性回归 Python实现
    go 算法 查询字符在字符串中的位置
    Python与Go快速排序
    Python与Go斐波那契数列
    Python与Go选择排序
    Python与Go插入排序
    Python与Go冒泡排序
    git clone直接提交用户名和密码
  • 原文地址:https://www.cnblogs.com/norm/p/6208253.html
Copyright © 2011-2022 走看看