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判断元素为数字的奇异写法分享
Aug 01 Javascript
HTML上传控件取消选择
Mar 06 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
安装vue-cli的简易过程
May 22 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
微信小程序实现日历小功能
Nov 18 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
thinkPHP自定义类实现方法详解
2016/11/30 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
python分析apache访问日志脚本分享
2015/02/26 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
python和c语言的主要区别总结
2019/07/07 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
毕业学生推荐信
2013/12/01 职场文书
开办饭店创业计划书
2013/12/28 职场文书
2014学年自我鉴定
2014/02/23 职场文书
爱国演讲稿500字
2014/05/04 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
邀请函模板
2015/02/02 职场文书
宿舍管理制度范本
2015/08/07 职场文书