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

站长资源 2024/11/30 佚名

2 0 1

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

需求

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

文本和文本框

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

将数据显示到界面中
"htmlcode">

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

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

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="/UploadFiles/2021-04-02/jquery-2.2.3.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的方法

 "htmlcode">

     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="/UploadFiles/2021-04-02/jquery-2.2.3.js">

Tips

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

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

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

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

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

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


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

jquery,选择器,表单

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

2024年11月30日

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

javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存