如何使用Jquery從複選框收集值的JSON對象？

我正在嘗試爲用戶創建某種小型聯繫表，他們可以選擇何時更舒適地聯繫他們。我有7天3個條件 - 上午/下午/晚上。如何使用Jquery從複選框收集值的JSON對象？

我試圖收集這種類型的對象，將其發送到服務器 -

{"SUNDAY":["MORNING"],"MONDAY":["EVENING","MORNING"]}

我有以下HTML結構：

<tr> 
<td class="table-headline">Morning</td> 
<td>         
    <label class="label-check"> 
     <input id="morning1" name="morning" type="checkbox" value="SUNDAY"> 
</label> 
</td> 
<td>         
    <label class="label-check"> 
     <input id="morning2" name="morning" type="checkbox" value="MONDAY"> 
</label> 
</td> 
<td>         
    <label class="label-check"> 
     <input id="morning3" name="morning" type="checkbox" value="TUESDAY"> 
</label> 
</td> 
<td>         
    <label class="label-check"> 
     <input id="morning4" name="morning" type="checkbox" value="WEDNESDAY"> 
</label> 
</td> 
<td>         
    <label class="label-check"> 
     <input id="morning5" name="morning" type="checkbox" value="THURSDAY"> 
</label> 
</td> 
<td>         
    <label class="label-check"> 
     <input id="morning6" name="morning" type="checkbox" value="FRIDAY"> 
</label> 
</td> 
<td>         
    <label class="label-check"> 
     <input id="morning7" name="morning" type="checkbox" value="SATURDAY"> 
</label> 
</td>

我有三個類似的條件爲每個條件。這是不是一個問題，檢測，如果複選框檢查或不，我不知道如何在JSON收集這些數據後檢查。

來源

2013-02-11 you-rick

[有沒有這樣的事情作爲一個「對象JSON」]（http://benalman.com /新聞/ 2010/03 /孤單，沒有這樣的 - 事物 - 作爲一種JSON /）。它可以是JavaScript對象或JSON格式的字符串。你到目前爲止嘗試過什麼？ – 2013-02-11 16:26:32

這應該這樣做（假設複選框被包裹在一個表單元素）：

var data = $('form').serializeArray(), 
    obj = {}; 

for(var i = 0; i < data.length; i++){ 
    obj[data[i].name] = obj[data[i].name] || []; 
    obj[data[i].name].push(data[i].value); 
}  

// your JSON string 
console.log(JSON.stringify(obj));

編輯：我看到你有名稱和您的樣本字符串逆轉值。如果這是有意的，而不是拼寫錯誤，只需在上面的代碼中將name與value屬性對換即可。

來源

2013-02-11 16:37:28

謝謝！這樣可行：） – 2013-02-11 16:45:05

$('input').on('click',function(){ 
    // selectors that are checked => $('input:checked').length 
    console.log($('input:checked').length) 
})

來源

2013-02-11 16:31:18 Shanimal

就像我爲此創造了我的輸入。其here

的JS代碼如下

$('#btnsubmit').click(function() { 

    var obj = []; 
    obj.push({ 
     "MONDAY": GetDetails("MONDAY"), 
     "TUESDAY": GetDetails("TUESDAY"), 
     "WEDNESDAY": GetDetails("WEDNESDAY"), 
     "THURSDAY": GetDetails("THURSDAY"), 
     "FRIDAY": GetDetails("FRIDAY"), 
     "SATURDAY": GetDetails("SATURDAY"), 
     "SUNDAY": GetDetails("SUNDAY"), 
    }); 
$('#output').text(JSON.stringify(obj)); 
}); 

function GetDetails(day) { 
    var arr = new Array(); 
    $(':input[value="' + day + '"]').each(function() { 
     if (this.checked) { 
      arr.push($(this).attr('name')); 
     } 
    }); 
     return arr; 
}

輸出是如下

[{ 
"MONDAY":["afternoon"], 
"TUESDAY":[], 
"WEDNESDAY":["morning","afternoon"], 
"THURSDAY":[], 
"FRIDAY":["morning","afternoon"], 
"SATURDAY":[], 
"SUNDAY":[] 
}]

來源

2013-02-11 16:52:03 Qpirate

如何使用Jquery從複選框收集值的JSON對象？

回答

相關問題