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

时间：2023-02-11 16:19:25

转载自：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使用不熟悉。

相关文章