首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

巧用jQuery选择器提高写表单效率的方法

Posted in Javascript onAugust 19, 2016

相信很多小伙伴都会遇到需要做表单的需求，就像我现在做的医院项目，茫茫多的表单无穷无尽。一开始做表单使用最笨的方法：一个个span去定义ID，每个数据都用ajax获取后赋值显示，然后在表单提交前一个个用jQuery根据ID获取元素的value，组成一个model来提交给服务器。
后来发现使用jQuery可以大大简化这个过程。于是我修改了工作方法，总结了我的一些提高写表单效率的方法。 

需求

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

文本和文本框

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

将数据显示到界面中
 •用for循环遍历解析成功的JSON数据
 •通过if判断过滤数据是span的还是input的。
 •将数据传给和数据名同名的ID元素。

for (var key in json) {
  //过滤type为text的文本框
  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就不需要写太多代码就可以完成表单了。再也不怕表单字段太多了。

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="jquery-2.2.3.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>

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

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="jquery-2.2.3.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>

Tips
 •如果有一些特殊处理的内容（如时间格式文本），可以先遍历后在遍历之后单独进行赋值。
 •以上方法可以用于所有以ID定义的用于显示和获取数据的HTML元素。
 •用好jQuery的选择器可以获取到任何所需的元素、元素集合。
 •在each()方法中$(this)表示当前元素。
 •获取所选ID的元素标签：$('#' + key).prop('tagName') == 'SPAN'，注意：标签结果'SPAN'都是大写的,可以打log验证。
 •不断找规律、总结提炼，找出最好的偷懒方法，尽量避免体力劳动。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

巧用jQuery选择器提高写表单效率的方法

- Author -

violetjack0808

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
Hexo已经看腻了，来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 #Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 #Javascript
jQuery Validate插件实现表单验证
Aug 19 #Javascript
jQuery如何封装输入框插件
Aug 19 #Javascript
JS提示：Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 #Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 #Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 #Javascript
Lifecycle(1) Spring(9) 小喇叭(1) S-2000(1) 脏读(2) 温控(1) IC-R9500(1) 小喇叭开始广播了(1) 增删查改(1) 微信(2)
You might like
PHP form 表单传参明细研究
2009/07/17 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
Vue 过渡（动画）transition组件案例详解
2017/01/22 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
微信小程序动画组件使用解析，类似vue，且更强大
2019/08/01 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
python数据清洗系列之字符串处理详解
2017/02/12 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
美国Rue La La闪购网站：奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
英国香水店：The Perfume Shop
2017/03/27 全球购物
高一数学教学反思
2014/02/07 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
职务任命书范本
2014/06/05 职场文书
英语课前三分钟演讲稿（6篇）
2014/09/13 职场文书
2014年防汛工作总结
2014/12/08 职场文书
初中家长评语和期望
2014/12/26 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书