javascript - 使用 jquery 获取一组复选框值

Question

在一组复选框中，例如在 php 中生成的

<?php
     foreach($estados as $estado){
          $html = '<div class="checkbox chk_estado">';
          $html .= '<label><input type="checkbox" class="estate_check" value="" chk_id="'.$estado->id_estat.'" />'.$estado->estat.'</label>';
          $html .="</div>";

          echo $html;
      }
 ?>

我正在尝试获取该类的已检查成员的 check_id 属性，但我在选中某些复选框时得到 0 值

var checked  = $('.estate_check').attr('chk_id');

Answer 1

如果您想在 HTML 元素中存储某些内容，请使用 data-* 属性。在这种情况下，请使用 data-check-id="..."。

<div class="checkbox chk_estado">
  <label>
    <input type="checkbox" class="estate_check" value="A" data-check-id="1">
    Something
  </label>
</div>
<div class="checkbox chk_estado">
  <label>
    <input type="checkbox" class="estate_check" value="B" data-check-id="2">
    Something
  </label>
</div>
<div class="checkbox chk_estado">
  <label>
    <input type="checkbox" class="estate_check" value="C" data-check-id="3">
    Something
  </label>
</div>

然后，这就是如何获取所有选中的复选框。

const getAllChecked = () =>
  Array.from(
    document.getElementsByClassName('estate_check')
  )
    .filter(x => x.checked)
    .map(x => x.dataset.checkId);

你会得到一个像这样的数组。

Array [ "1", "2" ]