使用jquery动态构建数组

Question

我在html中有4个复选框。我想如果选中任何复选框，其值将存储在数组中。我创建了一个函数，但它显示了空数组

var arry = [];

function CheckBox(check) {
  debugger

  for (i = 0; i < check.length; i++) {
    if (check[i].checked == true) {
      arry.push(check[i].value);
      alert(arry);
    }
  }

}

$(document).ready(function() {

  $("#btn").click(function() {
    debugger;
    alert(arry);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="chk1" value="1" class="chk" onclick="CheckBox(this)" />1
  <input type="checkbox" id="chk2" value="2" class="chk" onclick="CheckBox(this)" />2
  <input type="checkbox" id="chk3" value="3" class="chk" onclick="CheckBox(this)" />3
  <input type="checkbox" id="chk4" value="4" class="chk" onclick="CheckBox(this)" />4
  <input type="button" id="btn" value="alert" />
</div>

Answer 1

1. 您可以使用.each()循环复选框
2. 使用.is(":checked")检查检查状态

$(document).ready(function() {

  $("#btn").click(function() {
    var arry = [];
    $.each($(".chk"), function() {
      if ($(this).is(":checked")) {
        arry.push($(this).val());
      }

    })
    console.log(arry)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="chk1" value="1" class="chk" />1
  <input type="checkbox" id="chk2" value="2" class="chk" />2
  <input type="checkbox" id="chk3" value="3" class="chk" />3
  <input type="checkbox" id="chk4" value="4" class="chk" />4
  <input type="button" id="btn" value="alert" />
</div>

Answer 2

几个问题。最糟糕的是没有得到函数中的复选框。

你传递了一个盒子，而不是一个盒子

var arry = [];  
function CheckBox(check) {
  arry = [];  
  $("."+check.className).each(function() {  // get the other checks
    if (this.checked) { // or jQuery: $(this).is(":checked");
      arry.push(this.value); // or jQuery $(this).val()
      alert(arry);
    }
  })
}

$(document).ready(function() {

  $("#btn").click(function() {
    alert(arry);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="chk1" value="1" class="chk" onclick="CheckBox(this)" />1
  <input type="checkbox" id="chk2" value="2" class="chk" onclick="CheckBox(this)" />2
  <input type="checkbox" id="chk3" value="3" class="chk" onclick="CheckBox(this)" />3
  <input type="checkbox" id="chk4" value="4" class="chk" onclick="CheckBox(this)" />4
  <input type="button" id="btn" value="alert" />
</div>

Answer 3

在JavaScript / Jquery代码中添加以下更改

$("#btn").click(function() {
    var arry = [];
    $.each($(".chk"), function() {
      if ($(this).is(":checked")) {
        arry.push($(this).val());
      }

    })
    alert(arry)
  });
});