分組複選框選擇

我有一系列的複選框，我試圖按照名稱對選擇進行分組，並將選擇作爲集合存儲。所以，我之後的最終輸出是這樣的分組複選框選擇

{ 
'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>

來源

2016-01-22 soum

我看不到任何小提琴。 –

@ZakariaAcharki - 我忘了補充一下:-) ...只是用它更新了問題。這裏是任何方式https://jsfiddle.net/sghoush1/xLxezzLz/1/ – soum

你寫的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/

來源

2016-01-22 19:18:22 chrki

$('.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，而不是報價，不帶引號的字段的混合物。）其餘部分是相當簡單的，我想不言自明。

來源

2016-01-22 19:16:02

分組複選框選擇

回答

相關問題