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实现网站首页图片滚动显示
Feb 04 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
浅谈es6中的元编程
Dec 01 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实现文件上传二法
2006/10/09 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
php curl发送请求实例方法
2019/08/01 PHP
Stop SQL Server
2007/06/21 Javascript
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
python的继承知识点总结
2018/12/10 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
python实现智能语音天气预报
2019/12/02 Python
Django自带的用户验证系统实现
2020/12/18 Python
软件测试常见笔试题
2012/02/04 面试题
搞笑获奖感言
2014/01/30 职场文书
社区党务公开实施方案
2014/03/18 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
公务员年终个人总结
2015/02/12 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
python之django路由和视图案例教程
2021/07/26 Python