为每个选中和未选中的复选框发布特定值

Question

我有一组复选框控件，我想在数组中为选中的控件发布某个值，为未选中的控件发布 null

我在下面编写了代码 sn-p，但无论它们的检查状态如何，我总是得到相同的值

$("#bt1").click(function() {
  var checked = []
  var val = ''
  var $chbx = $("input[name='advsrc']")
  $chbx.each(function() {
    if ($chbx.is(':checked')) {
      val = 'ahmad'
    } else {
      val = 'null'
    }
    checked.push(val);
  });
  console.log(checked)

  return false;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="bt1" type="button" value="button" />
<input id="grndsrc" type="checkbox" checked="checked" name="advsrc" />
<input id="fnamesrc" type="checkbox" name="advsrc" />
<input id="lnamesrc" type="checkbox" name="advsrc" />
<input id="dobsrc" type="checkbox" name="advsrc" />
<input id="telsrc" type="checkbox" name="advsrc" />
<input id="ssnsrc" type="checkbox" name="advsrc" />

@techlove 的回答

$("#bt1").click(function() {
  var checked = []
  var val = ''
  var $chbx = $("input[name='advsrc']")
  $chbx.each(function() {
    if ($(this).attr("checked")) {
      val = 'ahmad'
    } else {
      val = 'null'
    }
    checked.push(val);
  });
  console.log(checked)

  return false;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="bt1" type="button" value="button" />

<input id="grndsrc" type="checkbox" name="advsrc" />
<input id="fnamesrc" type="checkbox" name="advsrc" />
<input id="lnamesrc" type="checkbox" name="advsrc" />
<input id="dobsrc" type="checkbox" name="advsrc" />
<input id="telsrc" type="checkbox" name="advsrc" />
<input id="ssnsrc" type="checkbox" name="advsrc" />

Answer 1

您的问题在这一行：

if ($chbx.is(':checked')) {

将该行更改为：

if ($(this).is(':checked')) {

您可以使用.map() 或Array.prototype.reduce() 而不是.each() 以获得所需的结果。记得使用.get() 来检索 $(":checkbox[name='advsrc']") 匹配的元素。

$("#bt1").click(function() {
    var checked = $(":checkbox[name='advsrc']").map(function(idx, ele) {
        return (ele.checked) ? 'ahmad' : 'null';
    }).get();
    console.log(checked);

    return false;
})

$("#bt2").click(function() {
    var checked = $(":checkbox[name='advsrc']").get().reduce(function(acc, ele, idx) {
        acc[ele.id || 'noId' + idx] = (ele.checked) ? 'a' : '';
        return acc;
    }, {});
    console.log(checked);

    return false;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input id="bt1" type="button" value="button" />
<input id="bt2" type="button" value="buttonNew" />
<input id="grndsrc" type="checkbox" checked="checked" name="advsrc" />
<input id="fnamesrc" type="checkbox" name="advsrc" />
<input id="lnamesrc" type="checkbox" name="advsrc" />
<input id="dobsrc" type="checkbox" name="advsrc" />
<input id="telsrc" type="checkbox" name="advsrc" />
<input id="ssnsrc" type="checkbox" name="advsrc" />
<input  type="checkbox" name="advsrc" />