效果展示

第一种需求,点击input的时候,input的value发生改变

$('.group-wrapper input').click(function(){
$(this).val(0); //如果上面input的默认value是1,这样就可以在点击的时候变成0
});

第二种需求,input手动添加上选中的状态,也是要改变input的value

$('.group-wrapper input').click(function(){
var status = $(this).prop('checked'); //获取当前input的状态,看是不是选中的状态
var val = status === true ? 1 : 0; //三元表达式判断input的值,选中为1.不选中为0,赋值给一个val的变量
$(this).val(val); //改变input的val
});

第三种情况,用form表单提交的时候,input没有选中的话提交不过去


$('.group-wrapper input').click(function(){
var status = $(this).prop('checked');
var val = status === true ? 1 : 0;
$(this).val(val);
}); $('.btn-primary').click(function(){ //给确定下载的按钮添加点击事件
$('.group-wrapper input').each(function(){ //找到所有的input遍历它,
if(!this.checked){
this.checked = true; //判断当前input的选中状态,没有选中的话,让他选中。
}
});
}); //这样的话就是,前面的方法是选中不选中 设置为0或1,但是又由于没选中的话form提交不过去,所以就再写一个事件,没选中的话让他选中。

第四种情况,点击确定下载,将input的name和value拼接起来

效果展示

//确定下载
$('.btn-primary').click(function(){
var inputs=$('.group-wrapper').find('input'); //找到所有的input
var _arr=''; //声明一个空的字符串
for (var i = 0; i < inputs.length; i++) { //循环遍历所有找到的input
var inputname=inputs[i].name; //将当前的input的name属性赋给一个变量
if(inputs[i].checked){ //判断当前input的选中状态
_arr += inputname + '=1&'; //选中的情况下拼接到上面声明的空的字符串上值 等于1
}else{
_arr += inputname + '=0&' //没有选中的情况下也拼接到上面声明的空的字符串上值等于0
}
}
console.log(_arr.slice(0,-1)); //截取的原因是,末尾多了一个&符号
var result = _arr.slice(0,-1);
});

form表单提交的时候,传过去的值是键值对的形式的更多相关文章

  1. Ajax提交Form表单及文件上传

    刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...

  2. js_ajax模拟form表单提交_多文件上传_支持单个删除

    需求场景: 用一个input type="file"按钮上传多张图片,可多次上传,可单独删除,最后使用ajax模拟form表单提交功能提交到指定方法中: 问题:由于只有一个file ...

  3. 非form表单提交的数据就要用@requestbody注解获取http传过来的值,尤其json

    非form表单提交的数据就要用@requestbody注解获取http传过来的值,尤其json

  4. Java后台使用httpclient入门HttpPost请求(form表单提交,File文件上传和传输Json数据)

    一.HttpClient 简介 HttpClient 是 Apache Jakarta Common 下的子项目,用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 ...

  5. js的form表单提交url传参数(包含+等特殊字符)的解决方法

    方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){        var formredwin = document.createElemen ...

  6. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  7. Form表单提交,Ajax请求,$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

  8. Django的form表单之文件上传

    在生成input标签的时候可以指定input标签的类型为file类型 <!DOCTYPE html> <html lang="en"> <head&g ...

  9. python中前后端通信方法Ajax和ORM映射(form表单提交)

    后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...

随机推荐

  1. Pandas与Matplotlib

    Pandas与Matplotlib基础 pandas是Python中开源的,高性能的用于数据分析的库.其中包含了很多可用的数据结构及功能,各种结构支持相互转换,并且支持读取.保存数据.结合matplo ...

  2. CCS+C6678LE开发记录11:多核协作(IPC)入门

    为更好地发挥C6678的多核性能,需要用到多核协作.幸运的是,我们可以使用官方提供的IPC模块. IPC=Inter-Processor Communication, 核间通信,粗略来说就是多核之间进 ...

  3. excel文件使用html导出

    <table><tr><td>1</td></tr><tr><td>2</td></tr>& ...

  4. jquery简介 each遍历 prop attr

    一.JQ简介 jQuery是一个快速.简洁的JavaScript框架,它封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和 ...

  5. Android tablayout增加选择tab 的事件.

    tablayout在点击或者滑动的时候会触发监听事件  , 当你调用这个方法的时候 会触发事件 mTablayout.addOnTabSelectedListener(new TabLayout.On ...

  6. MySQL学习(四)——外键

    1.比方现在有两张表“分类表”和“商品表”,为了表明商品属于哪个分类,通常我们将在商品表上添加一列,用于存放分类cid的信息,此列称为:外键. 此时分类表category称为主表,cid称为主键:商品 ...

  7. 【原创】websphere部署war包报错

    应用程序在Tomcat上运行一切正常,但在websphere上部署时报以下错误:错误 500 处理请求时发生一个错误: /admin/upload.do 消息: WEB-INF/web.xml 详细错 ...

  8. Uva 1605 Building for UN【构造法】

    题意:给出n个国家,给它们分配办公室,使得任意两个国家都有一对相邻的格子 看的紫书,最开始看的时候不理解 后来还是搜了题解--- 发现是这样的 比如说5个国家 应该输出 AAAA BBBB CCCC ...

  9. day02变量

    一. 什么是变量? 变量:在程序运行过程中,值会发生变化的量.(与之相对应的,常量就是在程序运行过程中,值不会发生变化的量).无论是变量还是常量,在创建时都会在内存中开辟一块空间,用于保存它的值. 二 ...

  10. 联想lenovo 家用电脑安装win7 无法引导问题(新电脑安装系统时提示File:\Boot\BCD错误解决方案)

    安装方式 : 1.进入 PE 2.用 EasyimageX 恢复 GHO镜像 3.重启后出现  原因: 主要 是安装win7 时,格式 化选择为GUID模式. 处理: win7 以后,格式华时选择MB ...