208

所以我有这些复选框：

<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 个并且是手动编码的（即不是从数据库中获取的），因此它们可能会在一段时间内保持不变。

我的问题是如何将它们全部放在一个数组中（在 javascript 中），这样我就可以在$.post使用 Jquery 发出 AJAX 请求时使用它们。

有什么想法吗？

编辑：我只想将选定的复选框添加到数组中

4

23 回答 23

394

格式化：

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

希望它会奏效。

于 2009-02-26T10:52:41.420 回答
93

纯JS

对于那些不想使用 jQuery 的人

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

for (var i = 0; i < checkboxes.length; i++) {
  array.push(checkboxes[i].value)
}
于 2017-09-02T16:18:54.880 回答
56 
var chk_arr =  document.getElementsByName("chkRights[]");
var chklength = chk_arr.length;             

for(k=0;k< chklength;k++)
{
    chk_arr[k].checked = false;
}
于 2012-03-02T07:45:24.710 回答
41

我没有测试它，但它应该可以工作

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

$(document).ready(function() {

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

});

</script>
于 2009-02-26T10:55:33.067 回答
27

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>

于 2017-08-25T06:56:11.477 回答
24

这应该可以解决问题：

$('input:checked');

我认为您没有其他可以检查的元素，但是如果这样做，则必须使其更具体：

$('input:checkbox:checked');

$('input:checkbox').filter(':checked');
于 2009-02-26T10:53:57.050 回答
23

不需要临时变量的纯 JavaScript：

Array.from(document.querySelectorAll("input[type=checkbox][name=type]:checked"), e => e.value);
于 2019-10-02T10:44:10.610 回答
14

在 MooTools 1.3 中（撰写本文时最新）：

var array = [];
$$("input[type=checkbox]:checked").each(function(i){
    array.push( i.value );
});
于 2011-06-26T12:45:24.933 回答
14

如果你想使用 vanilla 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>

于 2016-08-18T11:53:00.530 回答
12

在 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;
}
于 2015-05-10T06:01:31.333 回答
5 
var checkedValues = $('input:checkbox.vdrSelected:checked').map(function () {
        return this.value;
    }).get();
于 2016-09-09T16:57:13.870 回答
3

在检查时添加复选框的值并在取消检查时减去值

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

于 2017-11-16T07:33:14.370 回答
3

在现代浏览器中使用 vanilla JS 执行此操作的另一种方法（不支持 IE，遗憾的是在撰写本文时不支持 iOS Safari）是使用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
于 2019-07-02T10:16:13.977 回答
2

用这个：

var arr = $('input:checkbox:checked').map(function () {
  return this.value;
}).get();
于 2017-05-11T02:53:09.127 回答
2

按输入名称选择复选框

var category_id = [];

$.each($("input[name='yourClass[]']:checked"), function(){                    
    category_id.push($(this).val());
});
于 2021-03-04T09:05:33.823 回答
1

使用 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>
于 2016-03-16T10:09:01.830 回答
1 

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

于 2019-04-07T06:49:59.093 回答
1 
var array = []
    $("input:checkbox[name=type]:checked").each(function(){
        array.push($(this).val());
    });
于 2020-05-04T20:16:46.597 回答
0

如果您使用按钮单击或其他东西来运行插入，请使用注释的 if 块来防止添加已经在数组中的值

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

于 2017-10-18T11:56:21.960 回答
0

你可以尝试这样的事情：

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

这里

$('input[type="checkbox"]').change(function() call when any checkbox checked or unchecked, after this
$('input:checkbox:checked').map(function()  looping on all checkbox,
于 2018-04-13T10:06:54.967 回答
0

这是我解决同样问题的代码，有人也可以试试这个。 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>
于 2018-05-04T09:56:49.690 回答
0

可以使用我创建的这个功能

function getCheckBoxArrayValue(nameInput){
    let valores = [];
    let checked = document.querySelectorAll('input[name="'+nameInput+'"]:checked');
    checked.forEach(input => {
        let valor = input?.defaultValue || input?.value;
        valores.push(valor);
    });
    return(valores);
}

使用它就这样称呼它

getCheckBoxArrayValue("type");
于 2021-05-05T15:14:01.570 回答
0 
 var idsComenzi = [];

    $('input:checked').each(function(){
        idsComenzi.push($(this).val());
    });
于 2021-10-12T12:13:05.580 回答