javascript - 配列内の選択されたすべてのチェックボックスを取得する

Question

だから私はこれらのチェックボックスを持っています:

<input type="checkbox" name="type" value="4" />
<input type="checkbox" name="type" value="3" />
<input type="checkbox" name="type" value="1" />
<input type="checkbox" name="type" value="5" />

等々。それらは約 6 あり、手動でコーディングされている (つまり、データベースからフェッチされていない) ため、しばらくの間同じままである可​​能性があります。

$.post私の質問は、 Jquery を使用して AJAX リクエストを作成するときにそれらを使用できるように、それらをすべて配列 (javascript) で取得する方法です。

何かご意見は？

編集:選択したチェックボックスのみを配列に追加したい

Answer 1

フォーマット済み:

$("input:checkbox[name=type]:checked").each(function(){
    yourArray.push($(this).val());
});

うまくいけば、うまくいくでしょう。

Answer 2

var chk_arr =  document.getElementsByName("chkRights[]");
var chklength = chk_arr.length;             

for(k=0;k< chklength;k++)
{
    chk_arr[k].checked = false;
} 

Answer 3

これでうまくいくはずです：

$('input:checked');

チェックできる他の要素があるとは思いませんが、もしそうなら、より具体的にする必要があります：

$('input:checkbox:checked');

$('input:checkbox').filter(':checked');

Answer 4

MooTools 1.3（執筆時点で最新）の場合：

var array = [];
$$("input[type=checkbox]:checked").each(function(i){
    array.push( i.value );
});

Answer 5

バニラ JS を使用する場合は、@zahid-ullah と同様に実行できますが、ループを回避できます。

  var values = [].filter.call(document.getElementsByName('fruits[]'), function(c) {
    return c.checked;
  }).map(function(c) {
    return c.value;
  });

ES6 の同じコードは、より見栄えがよくなります。

var values = [].filter.call(document.getElementsByName('fruits[]'), (c) => c.checked).map(c => c.value);

window.serialize = function serialize() {
  var values = [].filter.call(document.getElementsByName('fruits[]'), function(c) {
    return c.checked;
  }).map(function(c) {
    return c.value;
  });
  document.getElementById('serialized').innerText = JSON.stringify(values);
}

label {
  display: block;
}

<label>
  <input type="checkbox" name="fruits[]" value="banana">Banana
</label>
<label>
  <input type="checkbox" name="fruits[]" value="apple">Apple
</label>
<label>
  <input type="checkbox" name="fruits[]" value="peach">Peach
</label>
<label>
  <input type="checkbox" name="fruits[]" value="orange">Orange
</label>
<label>
  <input type="checkbox" name="fruits[]" value="strawberry">Strawberry
</label>
<button onclick="serialize()">Serialize
</button>
<div id="serialized">
</div>

Answer 6

Javascript では、次のようになります(デモ リンク) :

// get selected checkboxes
function getSelectedChbox(frm) {
  var selchbox = [];// array that will store the value of selected checkboxes
  // gets all the input tags in frm, and their number
  var inpfields = frm.getElementsByTagName('input');
  var nr_inpfields = inpfields.length;
  // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
  for(var i=0; i<nr_inpfields; i++) {
    if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
  }
  return selchbox;
}   

Answer 7

var checkedValues = $('input:checkbox.vdrSelected:checked').map(function () {
        return this.value;
    }).get();

Answer 8

最新のブラウザー (IE サポートなし、悲しいことに、執筆時点では iOS Safari サポートなし) のバニラ JS でこれを行う別の方法は、FormData.getAll()を使用することです。

var formdata   = new FormData(document.getElementById("myform"));
var allchecked = formdata.getAll("type"); // "type" is the input name in the question

// allchecked is ["1","3","4","5"]  -- if indeed all are checked

Answer 9

入力名でチェックボックスを選択

var category_id = [];

$.each($("input[name='yourClass[]']:checked"), function(){                    
    category_id.push($(this).val());
});

Answer 10

Jquery の使用

すべての入力にクラスを追加するだけで済みます。クラス「ソース」を追加しました。もちろん変更できます

<input class="source" type="checkbox" name="type" value="4" />
<input class="source" type="checkbox" name="type" value="3" />
<input class="source" type="checkbox" name="type" value="1" />
<input class="source" type="checkbox" name="type" value="5" />

<script type="text/javascript">
$(document).ready(function() {
    var selected_value = []; // initialize empty array 
    $(".source:checked").each(function(){
        selected_value.push($(this).val());
    });
    console.log(selected_value); //Press F12 to see all selected values
});
</script>

Answer 11

var array = []
    $("input:checkbox[name=type]:checked").each(function(){
        array.push($(this).val());
    });

Answer 12

function selectedValues(ele){
  var arr = [];
  for(var i = 0; i < ele.length; i++){
    if(ele[i].type == 'checkbox' && ele[i].checked){
      arr.push(ele[i].value);
    }
  }
  return arr;
}