巧用 jQuery 选择器写表单提高效率
沉沙 2018-06-14 来源 : 阅读 1106 评论 0

摘要:相信很多小伙伴都会遇到需要做表单的需求。表单中存在最多的无非就是文本、文本框、单选框、多选框。而一些表单中会有几十个甚至几百个选项。我们的目标就是以最高的效率来完成这些表单的数据获取和数据提交。 希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

需求

表单中存在最多的无非就是文本、文本框、单选框、多选框。而一些表单中会有几十个甚至几百个选项。我们的目标就是以最高的效率来完成这些表单的数据获取和数据提交。 
注意:如果元素ID和服务器上获取的json字段的名字是一样的,那么这篇文章或许能对你提高工作效率有所帮助。

文本和文本框

对于文本和文本框,我们通常需要为元素添加ID来绑定和获取数据。

将数据显示到界面中

· 用for循环遍历解析成功的JSON数据

· 通过if判断过滤数据是span的还是input的。

· 将数据传给和数据名同名的ID元素。

for (var key in json) {
   
   if ($('#' + key).attr('type') == 'text') {
       $('#' + key).val(json[key]);
   }
   if($('#' + key).prop('tagName') == 'SPAN'){
       $('#' + key).text(json[key]);
   }
}

快速获取数据对象用于提交服务器

· 定义空model对象。

· 通过jQuery选择器获取目标元素的value。

· 将数据传入model中,对象元素的字段就是HTML元素的ID。

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);

按照如下方法,我们只需要照着后端提供的数据字段给HTML定义id,而JS就不需要写太多代码就可以完成表单了。再也不怕表单字段太多了。

 

Radio和Checkbox

另外一种经常出现于表单中的就是radio、checkbox这些单选多选的元素了。这些元素通常用name命名一组选项。下面我同样用jQuery简化数据的显示和提交。

显示数据

和之前的文本一样,用for循环遍历json数据,然后通过if过滤后显示到界面。不同之处是这边是通过name来显示和绑定数据的。 
注:对radio和checkbox处理的方法写在了后面,所以复制粘贴的同学们请注意别漏了~

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]);
   }
}

获取数据model的方法

· 定义空model对象。

· 定义name避免重复添加。

· 遍历所有radio获取结果传给model

· 遍历所有checkbox获取结果传给model

       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);
        }

处理radio和checkbox的一些方法

这里对radio和checkbox的显示和获取结果写了几个方法。

 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;
        }

 

Tips

· 如果有一些特殊处理的内容(如时间格式文本),可以先遍历后在遍历之后单独进行赋值。

· 以上方法可以用于所有以ID定义的用于显示和获取数据的HTML元素。

· 用好jQuery的选择器可以获取到任何所需的元素、元素集合。

· 在each()方法中$(this)表示当前元素。

· 获取所选ID的元素标签:$('#' + key).prop('tagName') == 'SPAN',注意:标签结果'SPAN'都是大写的,可以打log验证。

· 不断找规律、总结提炼,找出最好的偷懒方法,尽量避免体力劳动。

 

本文由职坐标整理发布,学习更多的jQuery相关知识,请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程