分组复选框选择

Question

我有一系列的复选框，我试图按照名称对选择进行分组，并将选择作为集合存储。所以，我之后的最终输出是这样的

{ 
'E113': [{'id':'sxk1', value: '19'}, {'id':'sxk22', value: '29'}], 
'E013': [{'id':'kxk1', value: '22'}, {'id':'sxk3', value: '15'}] 
} 

在现实中它不会发生这样的。它在这些数组周围添加“”，如果我只选择一个复选框，则不会将它包装在数组中。

这里是我的JS

$(".checkbox").click(function() { 

     var selectionForm = JSON.stringify($('#form').serializeObject()) 
     console.log(selectionForm) 

    }) 

$.fn.serializeObject = function() 
    { 
     var o = {}; 
     var a = this.serializeArray(); 
     $.each(a, function() { 
      if (o[this.name] !== undefined) { 
       if (!o[this.name].push) { 
        o[this.name] = [o[this.name]]; 
       } 
       o[this.name].push(this.value || ''); 
      } else { 
       o[this.name] = this.value || ''; 
      } 
     }); 
     return o; 
    }; 

，这里是我的小提琴

https://jsfiddle.net/sghoush1/xLxezzLz/1/

这里是我有我的标记

<form id="form"> 

<input type="checkbox" class="checkbox" name="E113" value="{'id':'sxk1', value: '19'}"/> 
<input type="checkbox" class="checkbox" name="E113" value="{'id':'sxk22', value: '29'}"/> 
<input type="checkbox" class="checkbox" name="E013" value="{'id':'kxk1', value: '22'}"/> 
<input type="checkbox" class="checkbox" name="E013" value="{'id':'sxk3', value: '15'}"/> 

</form> 

Answer 1

你写的JSON使用单引号'这是无效的，你应该用双引号"来代替。您的value也需要报价。

<input type="checkbox" class="checkbox" name="E113" value='{"id":"sxk1", "value": "19"}'/> 
<input type="checkbox" class="checkbox" name="E113" value='{"id":"sxk22", "value": "29"}'/> 
<input type="checkbox" class="checkbox" name="E013" value='{"id":"kxk1", "value": "22"}'/> 
<input type="checkbox" class="checkbox" name="E013" value='{"id":"sxk3", "value": "15"}'/> 

然后附加在/数据推到现有阵列使用JSON.parse检索JavaScript对象而不是文本字符串：JSON.parse(this.value)

固定小提琴：https://jsfiddle.net/rs108uLm/

Answer 2

$('.checkbox').on('click', function() { 
 

 
    var o = {}; 
 
    $('.checkbox:checked').each(function() { 
 
    var n = $(this).attr("name"), 
 
     // Convert your value into valid JSON (otherwise we'd have to use eval, which, no): 
 
     v = $(this).val().replace(/\'/g,'"').replace(/value:/,'"value":'); 
 
    
 
    if (o[n]) { 
 
     o[n].push(JSON.parse(v)); 
 
    } else { 
 
     o[n] = [JSON.parse(v)]; 
 
    } 
 
    }); 
 
    $('.output').html(JSON.stringify(o)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="checkbox" name="E113" value="{'id':'sxk1', value: '19'}" /> 
 
<input type="checkbox" class="checkbox" name="E113" value="{'id':'sxk22', value: '29'}" /> 
 
<input type="checkbox" class="checkbox" name="E013" value="{'id':'kxk1', value: '22'}" /> 
 
<input type="checkbox" class="checkbox" name="E013" value="{'id':'sxk3', value: '15'}" /> 
 

 
<div class="output"></div>

你可以避开一些那些正则表达式，如果你清理你的输入数据（使用有效的JSON，而不是报价，不带引号的字段的混合物。）其余部分是相当简单的，我想不言自明。