如何使用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对象？

回答

相关问题