2

ユーザーがいつ連絡しやすいかを選択できる、ある種の小さな連絡先テーブルを作成しようとしています。私は 7 日間と 3 つの条件 (朝/午後/夕方) を持っています。

この種のオブジェクトを収集してサーバーに送信しようとしています -

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

条件ごとに3つの同様の行があります。チェックボックスがチェックされているかどうかを検出することは問題ではありません。チェック後にJSONでこのデータを収集する方法がわかりません。

4

3 に答える 3

4

これでうまくいくはずです（チェックボックスがフォーム要素にラップされていると仮定します）：

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-11T16:37:28.883 に答える
1

参考までに、私はこれに対する入力を作成しました。ここに

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-11T16:52:03.723 に答える
0 
$('input').on('click',function(){
  // selectors that are checked => $('input:checked').length
  console.log($('input:checked').length)
})
于 2013-02-11T16:31:18.257 に答える