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的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 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
虫族 ZERG 概述
2020/03/14 星际争霸
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
php获取域名的google收录示例
2014/03/24 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
yii用户注册表单验证实例
2015/12/26 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
Vue.use源码分析
2017/04/22 Javascript
js随机生成一个验证码
2017/06/01 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
python实现静态web服务器
2019/09/03 Python
Python加速程序运行的方法
2020/07/29 Python
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
求职信模板
2014/05/23 职场文书
青年标兵事迹材料
2014/08/16 职场文书
2015年财政局工作总结
2015/05/21 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
Golang 结构体数据集合
2022/04/22 Golang
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python