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 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
基于jQuery的图片剪切插件
Aug 03 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 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/08/20 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
python基础教程之匿名函数lambda
2017/01/17 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
生产内勤岗位职责
2013/12/07 职场文书
2014年人事科工作总结
2014/11/19 职场文书
事业单位年度考核评语
2014/12/31 职场文书
公司放假通知范文
2015/04/14 职场文书
周末问候语大全
2015/11/10 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers
Python必备技巧之函数的使用详解
2022/04/04 Python
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android