jQueryはチェックされたチェックボックスの値を配列に取得します

現在チェックされているすべてのチェックボックスの値を取得して配列に格納しようとしています。これまでの私のコードは次のとおりです。

 $("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
      return $(this).val();
    });
    console.log(searchIDs);
  });

しかし、これは必要以上に出力します。値を取得するだけでなく、他の不要なものも取得します。

["51729b62c9f2673e4c000004"、 "517299e7c9f26782a7000003"、 "51729975c9f267f3b5000002"、prevObject：jQuery.fn.jQuery.init [3]、コンテキスト：document、jquery： "1.9.1"、コンストラクター：function、init：function…]

IDのみ（この場合は最初の3項目）が欲しいのですが。

$.each値を使用して配列にプッシュすると、目的の出力が得られます。

$("#find-table input:checkbox:checked").each(function(){ myArray.push($(this).val()); })

["51729b62c9f2673e4c000004"、 "517299e7c9f26782a7000003"、 "51729975c9f267f3b5000002"]

ただし$.map、を使用したいのは、コードを1行節約し、見栄えがよいためです。

ありがとう

.get()最後に呼び出して、結果のjQueryオブジェクトを真の配列に変換します。

$("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
      return $(this).val();
    }).get(); // <----
    console.log(searchIDs);
});

ドキュメントごと：

戻り値は配列を含むjQueryオブジェクトであるため、基本的な配列を処理するために結果に対して.get（）を呼び出すことは非常に一般的です。

デモ：http : //jsfiddle.net/PBhHK/

$(document).ready(function(){

    var searchIDs = $('input:checked').map(function(){

      return $(this).val();

    });
    console.log(searchIDs.get());

});

get（）を呼び出すだけで、仕様に記載されている配列が得られます。http：//api.jquery.com/map/

$(':checkbox').map(function() {
      return this.id;
    }).get().join();

関数の.toArray()最後に追加する必要があります.map()

$("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
        return $(this).val();
    }).toArray();
    console.log(searchIDs);
});

デモ：http : //jsfiddle.net/sZQtL/

私はあなたのコードを少しリファクタリングし、私があなたが探していたソリューションが付属していると信じています。基本的にsearchIDs、結果を設定する代わり.map()に、配列に値をプッシュしました。

$("#merge_button").click(function(event){
  event.preventDefault();

  var searchIDs = [];

  $("#find-table input:checkbox:checked").map(function(){
    searchIDs.push($(this).val());
  });

  console.log(searchIDs);
});

コードを実行してフィドルを作成しました。

     var ids = [];

$('input[id="find-table"]:checked').each(function() {
   ids.push(this.value); 
});

これは私のために働いた！

フォームが実際に送信されたかのように、HTMLで名前が付けられたフォーム要素を配列としてJavaScriptオブジェクトの配列にする必要がありました。

次のような複数のチェックボックスがあるフォームがある場合：

<input name='breath[0]' type='checkbox' value='presence0'/>
<input name='breath[1]' type='checkbox' value='presence1'/>
<input name='breath[2]' type='checkbox' value='presence2'/>
<input name='serenity'  type='text' value='Is within the breath.'/>
...

結果は次のオブジェクトです。

data = {
   'breath':['presence0','presence1','presence2'],
   'serenity':'Is within the breath.'
}


var $form = $(this),
    data  = {};

$form.find("input").map(function()
{
    var $el  = $(this),
        name = $el.attr("name");

    if (/radio|checkbox/i.test($el.attr('type')) && !$el.prop('checked'))return;

    if(name.indexOf('[') > -1)
    {
        var name_ar = name.split(']').join('').split('['),
            name    = name_ar[0],
            index   = name_ar[1];

        data[name]  = data[name] || [];
        data[name][index] = $el.val();
    }
    else data[name] = $el.val();
});

そして、コードを改善するのに役立つたくさんの答えがありますが、それらは複雑すぎるか、私が望んでいたほど正確に実行しませんでした：jQueryを使用してフォームデータをJavaScriptオブジェクトに変換する

機能しますが、改善できます。1次元配列でのみ機能し、結果のインデックスはシーケンシャルにならない場合があります。配列の長さプロパティは、実際の長さではなく、配列の長さとして次のインデックス番号を返します。

これがお役に立てば幸いです。ナマステ！

var idsArr = [];

$('#tableID').find('input[type=checkbox]:checked').each(function() {
    idsArr .push(this.value);
});

console.log(idsArr);

「each」は使用しないでください。同じ要素の操作と変更に使用されます。「マップ」を使用して、要素本体からデータを抽出し、それを別の場所で使用します。

ここでは、ページのチェックボックスのクラスを許可し、varを使用すると、それらを配列に収集し、forループでチェック済みのtrueをチェックして、目的の操作を個別に実行できます。ここでカスタムの有効性を設定しました。それはあなたの問題を解決すると思います。

  $(".allows").click(function(){
   var allows = document.getElementsByClassName('allows');
   var chkd   = 0;  
   for(var i=0;i<allows.length;i++)
   {
       if(allows[i].checked===true)
       {
           chkd = 1;
       }else
       {

       }
   }

   if(chkd===0)
   {
       $(".allows").prop("required",true);
       for(var i=0;i<allows.length;i++)
        {
        allows[i].setCustomValidity("Please select atleast one option");
        }

   }else
   {
       $(".allows").prop("required",false);
       for(var i=0;i<allows.length;i++)
        {
        allows[i].setCustomValidity("");
        }
   }

});