获取数组中所有复选框的列表，其中有 1 或 0，具体取决于 Jquery 中的选中或未选中

Question

我想在jquery中有一个array来保存像[0,1,1,0]这样的值，其中 1 表示选中特定的复选框，否则如果 0 则取消选中。

function findout() {
var selected = [];
$(':checkbox').each(function() {
    selected.push($(this).is('checked'));
});
$('span').text('checkbox values are: ' + selected.join(','));
}
findout();
$('div').delegate('input:checkbox', 'click', findout);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input type="checkbox" name="options[]" />
    <input type="checkbox" name="options[]" />
    <input type="checkbox" name="options[]" />
    <input type="checkbox" name="options[]" />
    <input type="checkbox" name="options[]" />
</div>
<span></span>

复选框值不会更改它只是保持为假，我也希望值为 0,1 而不是真，假。

Answer 1

你的代码有很多小问题。只需一次查看一个问题，并使用大量控制台.log调用进行调试。希望这个工作片段有帮助！

function findout() {
  var selected = [];
  $('input').each(function() {
    selected.push( $(this).prop('checked') ? 1 : 0 );
  });
  $('span').text('checkbox values are: ' + selected.join(','));
}
findout();
$('input').on('click', findout);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" name="options[]" />
  <input type="checkbox" name="options[]" />
  <input type="checkbox" name="options[]" />
  <input type="checkbox" name="options[]" />
  <input type="checkbox" name="options[]" />
</div>
<span></span>

Answer 2

上面的答案使用$('input').each...，它将在结果中包含所有类型的输入(不仅是复选框(，它可能会产生一些关于文本框或按钮输入的0(false(，这可能不是你想要的！

最好使用 $("[type=checkbox]") 来获取所有复选框：

根据jQuery文档：

因为 ：checkbox 是一个 jQuery 扩展，而不是 CSS 的一部分 规范，使用 ：复选框的查询无法利用 本机 DOM querySelectorAll(( 提供的性能提升 方法。为了在现代浏览器中获得更好的性能，请使用 [类型="复选框"] 改为。

function findout() {
var selected = [];
$("[type=checkbox]").each(function() {
    selected.push($(this).prop("checked")? 1 : 0 );
});
$('span').text('Checkbox values are: ' + selected.join(','));
}
findout();
$('div').delegate('input:checkbox', 'click', findout);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input type="checkbox" name="options[]" />
    <input type="checkbox" name="options[]" />
    <input type="checkbox" name="options[]" />
    <input type="checkbox" name="options[]" />
    <input type="checkbox" name="options[]" />
</div>
<span></span>

Answer 3

虽然您通过@JasonB答案得到了解决方案，但另一个解决方案(也许是为了将来(关于使用 $.map .

$('div').delegate('input:checkbox', 'click', findout);
function findout() {
  var selected = [];
  $(':checkbox').on('change', function() {
    var selected = $.map($(':checkbox'), function(el, idx) {
      if ($(el).is(':checked')) {
        return 1
      } else {
        return 0
      }
    });
    $('span').text('checkbox values are: ' + selected.join(','));
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" name="options[]" />
  <input type="checkbox" name="options[]" />
  <input type="checkbox" name="options[]" />
  <input type="checkbox" name="options[]" />
  <input type="checkbox" name="options[]" />
</div>
<span></span>