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 无法通过W3C验证的处理方法
Mar 09 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
微信小程序之购物车功能
Sep 23 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 Javascript
vue组件添加事件@click.native操作
Oct 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
玩转虚拟域名◎+ .
2006/10/09 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
vue mounted组件的使用
2018/06/18 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
JS实现小星星特效
2019/12/24 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Python气泡提示与标签的实现
2020/04/01 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
python如何快速拼接字符串
2020/10/28 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
大三学习计划书范文
2014/05/02 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
贷款担保申请书
2014/05/20 职场文书
中秋节慰问信
2015/02/15 职场文书
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android