Lấy tất cả các hộp kiểm được chọn trong một mảng

Vì vậy, tôi có những hộp kiểm này:

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

Và như thế. Có khoảng 6 trong số chúng và được mã hóa bằng tay (nghĩa là không được tìm nạp từ db) vì vậy chúng có khả năng giữ nguyên trong một thời gian.

Câu hỏi của tôi là làm thế nào tôi có thể nhận được tất cả chúng trong một mảng (trong javascript), vì vậy tôi có thể sử dụng chúng trong khi thực hiện $.postyêu cầu AJAX bằng Jquery.

Có suy nghĩ gì không?

Chỉnh sửa: Tôi chỉ muốn các hộp kiểm đã chọn được thêm vào mảng

Định dạng:

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

Hy vọng, nó sẽ làm việc.

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

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

Tinh khiết

Đối với những người không muốn sử dụng jQuery

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

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

Tôi đã không kiểm tra nó nhưng nó sẽ hoạt động

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

$(document).ready(function() {

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

});

</script>

Cái này cần phải dùng mẹo:

$('input:checked');

Tôi không nghĩ rằng bạn có các yếu tố khác có thể được kiểm tra, nhưng nếu có, bạn phải làm cho nó cụ thể hơn:

$('input:checkbox:checked');

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

Trong MooTools 1.3 (mới nhất tại thời điểm viết bài):

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

Nếu bạn muốn sử dụng một vanilla JS, bạn có thể làm điều đó tương tự như @ zahid-ullah, nhưng tránh một vòng lặp:

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

Mã tương tự trong ES6 có vẻ tốt hơn:

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>

Trong Javascript nó sẽ như thế này (Liên kết 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;
}   

Phiên bản 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 thuần túy không cần biến tạm thời:

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();

Khi kiểm tra, thêm giá trị cho hộp kiểm và kiểm tra lại trừ đi giá trị

$('#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>

Một cách khác để làm điều này với vanilla JS trong các trình duyệt hiện đại (không hỗ trợ IE và đáng buồn là không có hỗ trợ Safari của iOS tại thời điểm viết bài) là với 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

Sử dụng Jquery

Bạn chỉ cần thêm lớp vào mỗi đầu vào, tôi đã thêm lớp "nguồn", bạn có thể thay đổi nó tất nhiên

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

Dùng cái này:

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

Sử dụng nhận xét nếu chặn để ngăn thêm các giá trị đã có trong mảng nếu bạn sử dụng nhấp vào nút hoặc một cái gì đó để chạy chèn

$('#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>

Bạn có thể thử một cái gì đó như thế này:

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

Đây

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

Đây là mã của tôi cho cùng một vấn đề mà ai đó cũng có thể thử. 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());
    });