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 相关文章推荐
测试你的JS的掌握程度的代码
Dec 09 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
js实现简单计算器
Nov 22 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 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
收音机指标测试方法及仪器
2021/03/01 无线电
CodeIgniter视图使用注意事项
2016/01/20 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
JS判定是否原生方法
2013/07/22 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python 爬虫的工具列表大全
2016/01/31 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
Python何时应该使用Lambda函数
2019/07/02 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
会计应届生的自荐信
2013/12/13 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
优秀公益广告词大全
2014/03/19 职场文书
抽奖活动主持词
2014/03/31 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
专业见习报告范文
2014/11/03 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
灵魂歌王观后感
2015/06/17 职场文书