使用jquery获取复选框值组

时间:2018-03-08 09:33:58

标签: javascript jquery

在一组复选框中,例如在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');

1 个答案:

答案 0 :(得分: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" ]