在jquery的数组中选中或不选中复选框[重复]答案

【问题标题】：Getting checkbox checked or not in a array in jquery [duplicate]在jquery的数组中选中或不选中复选框[重复]
【发布时间】：2017-11-20 08:50:31
【问题描述】：

<input type="checkbox" id="mark_box0" name="mark_box[]">
<input type="checkbox" id="mark_box1" name="mark_box[]">
<input type="checkbox" id="mark_box2" name="mark_box[]">

我想在数组中获取选中和未选中的复选框。请参考下面的示例输出数组。

Array
(
    [0] => 1 //mark_box0 is checked
    [1] => 0 //mark_box1 is not checked
    [2] => 1 //mark_box2 is checked
)

我尝试了一些代码但无法正常工作

var is_checked = $("input[name='mark_box[]']").map(function(){return this.value;}).get();

无论是否检查，上述代码都会返回数组下方

Array
(
    [0] => on
    [1] => on
    [2] => on
)

var is_checked = $("input[name=mark_box]:checked").map(function() {
     return this.value;
 }).get().join(","));  // returns empty array

请帮我做这件事。

【问题讨论】：

标签： javascript php jquery arrays

【解决方案1】：

您使用的方式是正确的，但您获得的值在每个状态下都将保持不变。您必须检查复选框是否被选中。代码如下：

var is_checked = $("input[name='mark_box[]']").map(function(){
       return $(this).attr("checked");
}).get();

如果您有任何疑问，请告诉我。

【讨论】：

取决于 jQuery 版本，prop("checked") 可能比 attr("checked") 更可取
@apokryfos 我同意你的看法。我还认为应该有prop 功能。谢谢。

【解决方案2】：

value 属性返回输入值。您应该使用返回复选框状态的checked。

var is_checked = $("input[name='mark_box[]']").map(function(){
  return this.checked ? 1 : 0;
}).get();

var is_checked = $("input[name='mark_box[]']").map(function(){
  return this.checked ? 1 : 0;
}).get(); 
console.log(is_checked);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked id="mark_box0" name="mark_box[]">
<input type="checkbox" id="mark_box1" name="mark_box[]">
<input type="checkbox" id="mark_box2" name="mark_box[]">

【讨论】：

【解决方案3】：

您需要检查checked 而不是value

$(".button").click(function() {
  var checkedArray = $("input[name='mark_box[]']").map(function() {
    return this.checked;
  }).get();
  console.log(checkedArray);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="mark_box0" name="mark_box[]">
<input type="checkbox" id="mark_box1" name="mark_box[]">
<input type="checkbox" id="mark_box2" name="mark_box[]">
<button class='button'>Submit</button>

【讨论】：

【解决方案4】：

你快到了。

而不是使用

var is_checked = $("input[name=mark_box]:checked").map(function() {
     return this.value;
 }).get().join(","));  // returns empty array

使用

var is_checked = $("input['name=mark_box[]']:checked").map(function() {
     return this.value;
 }).get().join(","));  // returns empty array

（注意[]）。

使用:checked 选择器，您无需循环所有输入。它会自动为您提供所有选中的元素。

所以$("input[name='mark_box[]']:checked") 返回所有选中的复选框。

$(function() {
  var checkedArr = $("input[name='mark_box[]']:checked");
  
  /*for the output:*/
  var print = $("input[name='mark_box[]']:checked").map(function() { 
   return $(this).attr('id');}).get().join(",");
  console.log( print );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="mark_box0" name="mark_box[]" />
<input type="checkbox" id="mark_box1" name="mark_box[]" checked />
<input type="checkbox" id="mark_box2" name="mark_box[]" />
<input type="checkbox" id="mark_box3" name="mark_box[]" checked />
<input type="checkbox" id="mark_box4" name="mark_box[]" checked />

【讨论】：

【解决方案5】：

我认为你需要像下面这样的东西

function getValues(){
var array = [];
$("input:checkbox[name='mark_box[]']").each(function(){
    array.push($(this).prop('checked') ? 1 : 0);
});
console.log(array);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="mark_box0" name="mark_box[]">
<input type="checkbox" id="mark_box1" name="mark_box[]">
<input type="checkbox" id="mark_box2" name="mark_box[]">

<button type="button" onclick="getValues()">Run</button>

【讨论】：