javascript - 如何使用javascript/jquery将检查项目的值存储在arrayList中？

在使用class获取存储在数组中的checked复选框的值之前。

<div class="form-check">
   <div class="form-group">
      <label> <input id="check_id" type="checkbox"
         value=1 class="chk" /> <span>Invoice</span>
      </label>
      <label> <input id="check_id" type="checkbox"
         value=2 class="chk" /> <span>Packing List</span>
      </label>
   </div>
</div>

它已成功存储在数组中为：

$(".chk").click(function() {
         getValueUsingClass();
    });

    function getValueUsingClass(){
        $(':checkbox:checked').each(function(i){
            chkArray[i] = $(this).val();
        });
    }

直到我将类名从.chk1和.chk2更改为止，它一直工作良好。所以我需要将类更改为chk1和chk2

<div class="form-check">
   <div class="form-group">
      <label> <input id="check_id" type="checkbox"
         value=1 class="chk1" /> <span>Invoice</span>
      </label>
      <label> <input id="check_id" type="checkbox"
         value=2 class="chk2" /> <span>Packing List</span>
      </label>
   </div>
</div>

可能不止这两个复选框（我只显示了2个，因为它是动态的），可能存在从.chk1到.chk15的复选框。当它们的类名不同时，如何将选中的复选框存储在数组中？

最佳答案

尝试使用jQuery Starts with selector开头。

您可以将其用作$(input[class^='chk'])

$('input[class^="chk"]').click(function() {
  var arr = getValueUsingClass();
  console.log(arr);
});

function getValueUsingClass() {
  var chkArray = [];
  $('input[class^="chk"]:checkbox:checked').each(function(i) {
    chkArray[i] = $(this).val();
  });
  return chkArray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="form-check">
  <div class="form-group">
    <label> <input  type="checkbox"
         value=1 class="chk1" /> <span>Invoice</span>
      </label>
    <label> <input  type="checkbox"
         value=2 class="chk2" /> <span>Packing List</span>
      </label>
  </div>
</div>