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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
JS实现简易日历效果
Jan 25 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
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
js添加table的行和列 具体实现方法
2013/07/22 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
javascript读写json示例
2014/04/11 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
js实现简单进度条效果
2020/03/25 Javascript
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
留学推荐信中文范文三篇
2014/01/25 职场文书
怎么写自荐书范文
2014/02/12 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
个人授权委托书范本
2014/09/14 职场文书
2014年团支部工作总结
2014/11/17 职场文书
单位婚育证明范本
2014/11/21 职场文书
十岁生日答谢词
2015/01/05 职场文书