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

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

  • 相关阅读:
    PostgreSQL中的partition-wise join
    Partition-wise join
    外观模式 门面模式 Facade 结构型 设计模式(十三)
    桥接模式 桥梁模式 bridge 结构型 设计模式(十二)
    组合模式 合成模式 COMPOSITE 结构型 设计模式(十一)
    创建型设计模式对比总结 设计模式(八)
    原型模式 prototype 创建型 设计模式(七)
    单例模式 创建型 设计模式(六)
    建造者模式 生成器模式 创建型 设计模式(五)
    抽象工厂模式 创建型 设计模式(四)
  • 原文地址:https://www.cnblogs.com/norm/p/6208253.html
Copyright © 2011-2022 走看看