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中typeof的用途介绍
Apr 11 Javascript
js如何取消事件冒泡
Sep 23 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
angular将html代码输出为内容的实例
Sep 30 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中fsockopen用法实例
2015/01/05 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
python映射列表实例分析
2015/01/26 Python
初步讲解Python中的元组概念
2015/05/21 Python
python实现日常记账本小程序
2018/03/10 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
养殖项目策划书范文
2014/01/13 职场文书
社区春季防火方案
2014/06/02 职场文书
教师求职自荐书
2014/06/14 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
小学英语听课心得体会
2016/01/14 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python