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重载函数的辅助方法2
Jul 04 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
jQuery侧边栏实现代码
May 06 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 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 新手入门教程
2009/08/03 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
Bootstrap Chart组件使用教程
2016/04/28 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python程序中设置HTTP代理
2016/11/06 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
幼儿园开学家长寄语
2014/01/19 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
活动策划邀请函
2014/02/06 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
中学团支部工作总结
2015/08/13 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
MySQL派生表联表查询实战过程
2022/03/20 MySQL