checkbox多选框单选和多选serializeObject()取值问题

最新推荐文章于 2023-07-18 09:36:56 发布
最新推荐文章于 2023-07-18 09:36:56 发布
阅读量1.1k 收藏
点赞数
文章标签： javascript html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kerolalala/article/details/122783971
版权
本文介绍了如何处理checkbox的选择，将其转换为适合存储的字符串格式。在多选情况下，使用serializeObject()获取数组并用join()转换为字符串。而对于单选和未选情况，进行了特定的条件判断来确保正确处理数据。
摘要由CSDN通过智能技术生成

最近做了个需求，需要将选择的星期入库保存，效果如下

 

我决定将选择的日期转为一个长字符串存入数据库的一个字段中，例如“w1,w2,w3,w6”

 

我们都知道，当checkbox多选的时候，用serializeObject()去获取表单对象的属性，获取到的值是一个数组

 

这个时候用.join()方法就可以得到长字符串

 

但当我们只选择一个的时候，获取到的值就直接变成了一个字符串

 

除此之外还有一种情况，当我们什么都不选的时候，获取到的form表单对象就直接没了"weekDate"这个属性

所以在入库保存前用 typeof formDate.weekDate === "undefined" 判断是否勾选数据

用typeof formDate.weekDate != "string" 判断是否多选，多选则用join()方法转换

 

kerolalala
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android中ListView + CheckBox实现单选、多选效果
08-31
本教程将详细介绍如何在Android中利用ListView和CheckBox实现单选和多选效果。 首先，实现单选功能。在单选模式下，用户每次点击ListView中的某一项，仅允许该项被选中，其他项的选中状态需要自动取消。以下是一个...
Bootstrap3 多选和单选框(checkbox)
08-31
和多选框一样，`disabled`属性可以用于禁用单选框。 **样式和布局** Bootstrap3 提供了两种布局方式：堆叠和行内布局。默认情况下，多选框和单选框会堆叠在一起，如示例所示。如果希望在一行内显示多个选项，可以...
记录serializeArray()方法获取未选中的checkbox、radio的值
LiuQjie的博客
04-28 341
最近项目中遇到需求，要求未选中的checkbox、radio都必须默认传值过去。在使用serializeArray()方法获取的表单形式为数组对象，但它获取不到未选中的checkbox、radio的name和value值。
复选框传多值问题（在页面用数组方式接收值）
weixin_34233856的博客
05-11 569
复选框传多值问题（在页面用数组方式接收值） 一、总结 1、在页面用数组方式接收值就可以解决复选框传多值的问题： <input type="checkbox" name="gttid[]" value="{$vo.id}"> {$vo.name}       2、样例和接收效果       二、checkbox如何实现多传值 问题 点全选提交如何全部保...
多种方法给checkbox赋值、获取value值、全选、取消全选
weixin_40030173的博客
07-01 6720
<div class="checkbox_box"> <input type="checkbox" name="coupon_id" id="" value="1" class="checkbox_coupon" /><label for="">111</label> <input type="checkbox" name="coupon_id" id="" value="2" class="checkbox_coupon" />&l.
（转）jquery serialize表单序列化，当radio或checkbox 未选中时，没有序列化到对象中的原因分析和解决方案 - ghostsf...
weixin_34341229的博客
03-15 576
相信很多人都用过jq的表单序列化serialize()方法，因为这能很方便地帮你把表单里所有的非禁用输入控件序列化为 key/value 对象，不需要你再去一个个地拼接参数了。 这是一个很好用的函数，用过的你肯定知道。但是ghostsf最近发现一个小bug（也许不应该叫bug，姑且称之）。就是当radio或checkbox 未选中时，没有序列化到对象中。 什么原因呢?下面分析之:瞄一眼源码：F...
uniapp多选标签/多选按钮/多选框源码
12-01
本项目着重讲解了如何在`uni-app`中实现多选标签、多选按钮和多选框的功能，这对于构建用户交互丰富的应用至关重要。 首先，我们来看“多选标签”。在UI设计中，多选标签（Multiple Select Tags）通常用于让用户在...
input:checkbox多选框实现单选效果跟radio一样
09-04
在网页设计中，`<input type="checkbox">` 通常用于创建多选框，允许用户选择多个选项。然而，有时我们需要实现类似`<input type="radio">`的单选效果，即用户只能选择一个选项，选择后其他选项将自动取消选中。本...
详解iview的checkbox多选框全选时校验问题
10-16
主要介绍了详解iview的checkbox多选框全选时校验问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery serializeobject();方法序列化表单的属性，返回字符串。
热门推荐
lg12lp12的博客
07-31 1万+
serializeobject(); 可以将表单中的文本框 下拉框 根据name 属性 序列化成字符串，必须在js中写这个方法 $.fn.serializeObject = function() {     var o = {"unique_id":new Date().getTime(),"state":false};     var a = this.serializeArray();
form表单序列化时获取不到未选中checkbox问题
lzdujing1的博客
05-16 4027
            $.fn.serializeObject = function(){                var $f = this;                  var data = this.serialize();                   var $chks = this.find(":checkbox:not(:checked)");    
解决获取多个checkbox值的问题
最新发布
qq_53808097的博客
07-18 308
当你模糊查询的时候遇到需要传多个checkbox值的时候，就很苦恼（如下所示）按照上面的步骤即可解决获取多个checkbox的问题实现模糊查询！
jQuery ajax - serializeArray() 序列化方法,让你一分钟获取表单里的所有内容
huangzhin的博客
08-02 1145
一、对 serializeArray() 的理解 1、serializeArray()函数用于序列化一组表单元素，将表单内容编码为一个JavaScript数组。 2、serializeArray()函数常用于将表单内容序列化为JSON对象，以便于被编码为JSON格式的字符串。 3、该函数会将可用于提交的每个表单控件封装成一个Object对象，该对象有name和value属性，对应该表单控件的nam...
serializeArray()与 serialize()
z69183787的专栏
11-01 1万+
.serializeArray() 编码一个form元素集合为一个“name属性值/value属性值”的数组。json结构，如： [ { name: a value: 1 }, { name: b value: 2 }, { name: c value: 3 }, { name: d value: 4
jquery多选择动态参数的使用以及ajax异步请求中提交整个form表单中serializeArray()的使用以及后台值得获取方式
小糖豆
01-05 5703
对于input单选按钮取值以及判断：$(function(){ var fingerprint =${obj.data.fingerprint}; for (var key in fingerprint) { /* $("input[type=radio][name='"+key+"']").attr("c
页面中的checkbox多选值获取
weixin_30477797的博客
08-09 377
依据name名称获取选中值 var arr=document.getElementsByName("name");arr是一个数组，就是所有checkbox的值；for(i=0;i<arr.length;i++){ 　　if(arr[i].checked){ 　　　　var a = arr[i].value; 　　}} 依据遍历标签获取选中值 //方法1 ...
Vue 实现复选框单选，多选，回显
04-08
可以使用 v-model 指令实现复选框的单选、多选和回显功能。当 v-model 绑定的数据是一个数组时，复选框可以实现多选功能；当 v-model 绑定的数据是一个布尔值时，复选框可以实现单选功能。回显功能可以通过将 v-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值