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:Object类型
May 10 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
vue.js todolist实现代码
Oct 29 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
JS 基本概念详细介绍
Oct 16 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下获取http状态的实现代码
2014/05/09 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
python面试题小结附答案实例代码
2019/04/11 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
商务主管岗位职责
2013/12/08 职场文书
大学生自荐书范文
2013/12/10 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
中专生自荐信
2014/06/25 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
Python超详细分步解析随机漫步
2022/03/17 Python