jqueryを使ってChekboxをチェックしたときにキー値のペア配列を作る方法は？

Question

複数のチェックボックスがあり、チェックボックスをオンにすると、2つのキー値ペアが生成されます。
このように：Object {id: "101", name: "example"}

これはチェックされたすべてのチェックボックスに対して生成され、複数のチェックボックスでチェックされた配列が必要です。次のようになります。私は、チェックボックスをオフにすると、彼らは、配列から削除し、警告ボックスを表示し、最大3チェックボックスif >3をチェックしないようにしたいことでしょう

$('.chkCompare').click(function(event) { 
    var value = [], 
     projectName = {}, 
     span = $(this).attr('id'), 
     value = $('.chkCompare:checked').map(function() { 
      $('#span' + span).text('ADDED').css({ 
       "color": "green" 
      }); 
      projectName['id'] = $(this).attr('id'); 
      projectName['name'] = $(this).attr('title'); 
      return value.push(projectName); 
     }).get(); 
}); 

を行っている

[{id:"id1",name:"name1"},{id:"id2",name:"name2"}] 

何。

Answer 1

$("input[type='checkbox']").change(function(){ 
     var arr = {}; 
     var count = 0; 
     $.each($("input[type='checkbox']:checked"), function(){    
     if(count++<3){ 
      arr[this.id] =this.name; 
     }else{ 
      $(this).prop('checked', false); 
     } 

     }); 
     console.log(JSON.stringify(arr)); 
    }); 

Answer 2

プロパティのチェックボックスは:checkedです。あなたの条件に基づいて、event.preventDefault()を使ってデフォルトのアクションをキャンセルします。

$('.chkCompare').click(function(event) { 
 
    var checkedElemets = $('.chkCompare:checked'); 
 
    if (checkedElemets.length > 3) { 
 
    event.preventDefault(); 
 
    alert('Only 3 checkbox can be checked'); 
 
    } 
 

 
    var values = checkedElemets.map(function() { 
 
    return { 
 
     id: this.id, 
 
     name: this.title 
 
    }; 
 
    }).get(); 
 

 
    console.log(values) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="chkCompare" title='t1' id='i1' /> 
 
<input type="checkbox" class="chkCompare" title='t2' id='i2'/> 
 
<input type="checkbox" class="chkCompare" title='t3' id='i3'/> 
 
<input type="checkbox" class="chkCompare" title='t4' id='i4'/> 
 
<input type="checkbox" class="chkCompare" title='t5' id='i5'/>