js中复选框的取值及赋值示例详解


Posted in Javascript onOctober 18, 2020

1、复选框的取值:(js部分)

var checkboxdata = $(“input[name=payoperator]:checked”).map(function() {
return $(this).val();
}).get().join(",");
<div class="form-group">
 <label class="col-lg-2 col-md-2 col-sm-12 control-label">支付方式</label>
 <div class="col-lg-4 col-md-4">
 <label class="checkbox-inline"> 
 <input type="checkbox" name="payoperator" value="1">支付宝在线缴费 </label>
 <label class="checkbox-inline"> 
 <input type="checkbox" name="payoperator" value="2" checked="checked">支付宝代扣缴费 </label>
 <label class="checkbox-inline">
 <input type="checkbox" name="payoperator" value="3" checked="checked">支付宝当面付 </label>
 </div>
</div>

复选框中name="payoperator"必须相同,复选框才会生效

2、复选框的赋值:

从后台取到值后要先在前端页面初始化(复选框都未选中)

$(“input[name=payoperator]”).attr(“checked”,false);

var detail = detaildata.pay_operator;(detaildata为从后台取到的所有数据的值,pay_operator为数据库的字段)
 var split = detail.split(",");
  for (var i = 0; i < split.length; i++) {
  $("input[name=payoperator][value="+split[i]+"]").attr("checked","checked");
  }

       页面布局与上方的布局取值一样。

总结

到此这篇关于js中复选框的取值及赋值的文章就介绍到这了,更多相关js复选框的取值及赋值内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
AngularJS实现路由实例
Feb 12 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 #Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 #Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 #Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 #Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 #Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 #Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 #Javascript
You might like
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
JavaScript中获取元素索引的函数
2010/09/10 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python实现目录树生成示例
2014/03/28 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
参观监狱心得体会
2014/01/02 职场文书
运动会稿件300字
2014/02/14 职场文书
小学数学课后反思
2014/04/23 职场文书
经理任命书模板
2014/06/06 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
毕业实习计划书
2015/01/16 职场文书
采购员岗位职责
2015/02/03 职场文书
2015年植树节活动总结
2015/02/06 职场文书
校本培训个人总结
2015/02/28 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python