Mendapatkan semua kotak centang yang dipilih dalam sebuah array

Jadi saya punya kotak centang ini:

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

Dan seterusnya. Ada sekitar 6 dari mereka dan kode tangan (yaitu tidak diambil dari db) sehingga mereka cenderung tetap sama untuk sementara waktu.

Pertanyaan saya adalah bagaimana saya bisa mendapatkan semuanya dalam sebuah array (dalam javascript), jadi saya bisa menggunakannya saat membuat $.postpermintaan AJAX menggunakan Jquery.

Adakah pikiran?

Sunting: Saya hanya ingin kotak centang yang dipilih ditambahkan ke array

Diformat:

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

Semoga ini berhasil.

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

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

JS murni

Bagi mereka yang tidak ingin menggunakan jQuery

var array = []
var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')

for (var i = 0; i < checkboxes.length; i++) {
  array.push(checkboxes[i].value)
}

Saya tidak mengujinya tetapi harus bekerja

<script type="text/javascript">
var selected = new Array();

$(document).ready(function() {

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

});

</script>

Ini harus melakukan trik:

$('input:checked');

Saya tidak berpikir Anda memiliki elemen lain yang dapat diperiksa, tetapi jika Anda melakukannya, Anda harus membuatnya lebih spesifik:

$('input:checkbox:checked');

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

Di MooTools 1.3 (terbaru pada saat penulisan):

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

Jika Anda ingin menggunakan vanilla JS, Anda dapat melakukannya dengan cara yang sama dengan @ zahid-ullah, tetapi menghindari satu loop:

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

Kode yang sama di ES6 terlihat jauh lebih baik:

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>

Dalam Javascript akan seperti ini (Tautan Demo) :

// 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;
}   

Versi ES6:

const values = Array
  .from(document.querySelectorAll('input[type="checkbox"]'))
  .filter((checkbox) => checkbox.checked)
  .map((checkbox) => checkbox.value);

function getCheckedValues() {
  return Array.from(document.querySelectorAll('input[type="checkbox"]'))
  .filter((checkbox) => checkbox.checked)
  .map((checkbox) => checkbox.value);
}

const resultEl = document.getElementById('result');

document.getElementById('showResult').addEventListener('click', () => {
  resultEl.innerHTML = getCheckedValues();
});

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

<br><br>
<button id="showResult">Show checked values</button>
<br><br>
<div id="result"></div>

JavaScript murni tanpa perlu variabel sementara:

Array.from(document.querySelectorAll("input[type=checkbox][name=type]:checked")).map(e => e.value)

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

Saat memeriksa tambahkan nilai untuk kotak centang dan pada penguraian kurangi nilai

$('#myDiv').change(function() {
  var values = 0.00;
  {
    $('#myDiv :checked').each(function() {
      //if(values.indexOf($(this).val()) === -1){
      values=values+parseFloat(($(this).val()));
      // }
    });
    console.log( parseFloat(values));
  }
});

<div id="myDiv">
  <input type="checkbox" name="type" value="4.00" />
  <input type="checkbox" name="type" value="3.75" />
  <input type="checkbox" name="type" value="1.25" />
  <input type="checkbox" name="type" value="5.50" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Cara lain untuk melakukan ini dengan vanilla JS di browser modern (tidak ada dukungan IE, dan sayangnya tidak ada dukungan iOS Safari pada saat penulisan) adalah dengan 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

Menggunakan Jquery

Anda hanya perlu menambahkan kelas ke setiap input, saya harus menambahkan kelas "sumber" Anda dapat mengubahnya tentu saja

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

Gunakan ini:

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

Gunakan komentar jika blok untuk mencegah nilai tambah yang sudah ada dalam array jika Anda menggunakan klik tombol atau sesuatu untuk menjalankan penyisipan

$('#myDiv').change(function() {
  var values = [];
  {
    $('#myDiv :checked').each(function() {
      //if(values.indexOf($(this).val()) === -1){
      values.push($(this).val());
      // }
    });
    console.log(values);
  }
});

<div id="myDiv">
  <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" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Anda dapat mencoba sesuatu seperti ini:

$('input[type="checkbox"]').change(function(){
       var checkedValue = $('input:checkbox:checked').map(function(){
                return this.value;
            }).get();         
            alert(checkedValue);   //display selected checkbox value     
 })

Sini

$('input[type="checkbox"]').change(function() call when any checkbox checked or unchecked, after this
$('input:checkbox:checked').map(function()  looping on all checkbox,

di sini adalah kode saya untuk masalah yang sama seseorang juga dapat mencoba ini. jquery

<script>
$(document).ready(function(){`
$(".check11").change(function(){
var favorite1 = [];        
$.each($("input[name='check1']:checked"), function(){                    
favorite1.push($(this).val());
document.getElementById("countch1").innerHTML=favorite1;
});
});
});
</script>

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