巧用jQuery选择器写表单办法总结（提高效率）

转载自：http://blog.csdn.net/violetjack0808/article/details/52221343

1、文本和文本框

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="../jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
    <div>
        <div>
            <label>姓名：<input type="text" id="name"></label>
            <label>性别：<input type="text" id="sex"></label>
            <label>年龄：<input type="text" id="age"></label>
            <label>时间：<input type="text" id="time"></label>
        </div>
        <div>
            <label>a：<span id="param01">1</span></label>
            <label>b：<span id="param02">2</span></label>
            <label>c：<span id="param03">3</span></label>
            <label>d：<span id="param04">4</span></label>
        </div>
    </div>
    <button onclick="showResult()">显示结果</button>
    <script>
        //多条input或者span的快速赋值
        //data是模拟服务器返回的JSON数据
        var data = '{"name":"张三","sex":"女","age":22,"time":"2016-5-10","param01":111,"param02":222,"param03":333,"param04":444}';
        //将数据显示到页面中
        var json = eval('(' + data + ')');
        for (var key in json) {
            if ($('#' + key).attr('type') == 'text') {
                $('#' + key).val(json[key]);
            }
            if($('#' + key).prop('tagName') == 'SPAN'){
                $('#' + key).text(json[key]);
            }
        }

        //获取文本和文本框的内容转为JSON对象
        function showResult() {
            var model = {};
            $('input[type="text"]').each(function () {
                model[$(this).attr('id')]=$(this).val();
            });
            $('span').each(function () {
                model[$(this).attr('id')]=$(this).text();
            });
            console.log(model);
        }
    </script>
</body>
</html>
复制代码

2、Radio和CheckBox

复制代码
<!DOCTYPE html>

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <title>Title</title>
    <script src="../jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
    <div>
        <div>
            <label><input type="radio" name="param01" value="1">1</label>
            <label><input type="radio" name="param01" value="2">2</label>
            <label><input type="radio" name="param01" value="3">3</label>
        </div>
        <div>
            <label><input type="radio" name="param02" value="1">1</label>
            <label><input type="radio" name="param02" value="2">2</label>
            <label><input type="radio" name="param02" value="3">3</label>
        </div>
        <div>
            <label><input type="radio" name="param03" value="1">1</label>
            <label><input type="radio" name="param03" value="2">2</label>
            <label><input type="radio" name="param03" value="3">3</label>
        </div>
        <div>
            <label><input type="checkbox" name="param04">1</label>
            <label><input type="checkbox" name="param04">2</label>
            <label><input type="checkbox" name="param04">3</label>
            <label><input type="checkbox" name="param04">3</label>
        </div>
        <div>
            <label><input type="checkbox" name="param05">1</label>
            <label><input type="checkbox" name="param05">2</label>
            <label><input type="checkbox" name="param05">3</label>
            <label><input type="checkbox" name="param05">3</label>
        </div>
        <button onclick="showResult()">显示结果</button>
        <label id="result">result</label>
    </div>
    <script>
        //多条radio或者checkbox的快速赋值
        var data = '{"param01":"1","param02":"3","param03":"2","param04":",1,0,0,0","param05":",0,0,1,1"}';
        var json =eval( '(' + data + ')');
        for(var key in json){
            if ($('input[name=' + key +  ']').attr('type') == 'radio') {
                showRadioValue(key, json[key]);
            }
            if ($('input[name=' + key +  ']').attr('type') == 'checkbox') {
                showCheckBoxValue(key, json[key]);
            }
        }

        function showRadioValue(name, value) {
            $('input[name=' + name +  ']').each(function () {
                if(value == $(this).val()){
                    $(this).attr('checked', 'true');
                }
            });
        }

        function getRadioValue(name) {
            var value = 0;
            var i = 0;
            $('input[name=' + name + ']' ).each(function () {
                if ($('input[name=' + name + ']').eq(i).is( ':checked')) {
                    value = $('input[name=' + name + ']').eq(i).val();
                    return;
                }
                i++;
            });
            return value;
        }

        function showCheckBoxValue (name, value) {
            var values = value.split(',' );
            var row = 1;
            $('input[name="' + name + '"]').each( function () {
                if (values[row] == 1) {
                    $(this).attr("checked" , 'true');
                }
                row++;
            });
        }

        function getCheckboxValue (name) {
            var text = "" ;
            $('input[name="' + name + '"]').each( function () {
                var t = '' ;
                if ($(this ).is(':checked')) {
                    t = "1";
                } else {
                    t = "0";
                }
                text += "," + t;
            });
            return text;
        }

        function showResult() {
            var model = {};
            var radioName = '';
            var checkboxName = '';
            $("input[type='radio']").each(function () {
                if($(this).attr('name') != radioName){
                    radioName = $(this).attr('name');
                    model[radioName] = getRadioValue(radioName);
                }
            });
            $("input[type='checkbox']").each(function () {
                if($(this).attr('name') != checkboxName){
                    checkboxName = $(this).attr('name');
                    model[checkboxName] = getCheckboxValue(checkboxName);
                }
            });
            console.log(model);
        }
    </script>
</body>
</html>
复制代码

后续待添加以及改进，Jquery使用不熟悉。

posted @   cogitoergosum  阅读(253)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手