post certain value for each checked and unchecked checkbox

Question

I have a group of checkbox controls that I want to post a certain value for the checked one and null for the unchecked ones in an array

I wrote the code snippet below but i always get the same value for all regardless their checked state

$("#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's answer

$("#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" />

use if ($(this).attr("checked")). Here: http://stackoverflow.com/questions/2660323/jquery-checkboxes-and-ischecked — tech2017, May 05 '17 at 20:01
You'll need to demonstrate what about @techLove's suggestion doesn't work. In his code, the button, when clicked, fires, and the console logs the appropriate array. — Heretic Monkey, May 05 '17 at 20:18
thank you, if you go to his link and fire the button nothing happens,,, https://jsfiddle.net/6v0f9ogq/,,,, i posted his code here too,,, all are null regardless their checked state — JSON, May 05 '17 at 20:20

gaetanoM · Accepted Answer · 2017-05-06T13:26:47.533

1

Your issue is in this line:

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

Change that line to:

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

Instead of .each() you can use .map() or Array.prototype.reduce() in order to achieve the desired result. Remember to use .get() to retrieve the elements matched by $(":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" />

edited May 06 '17 at 13:26

answered May 05 '17 at 20:12

gaetanoM

41,594
6
42
61

how can i return the ele id along with the 'ahmad' value? – JSON May 05 '17 at 20:18
1

@AhmadAbuMaizar you may build an array of objects: id + value – gaetanoM May 05 '17 at 20:24
thank you so much gaetanoM,,,, @techlove's thanks too – JSON May 05 '17 at 20:26
@AhmadAbuMaizar You are wellcome – gaetanoM May 05 '17 at 20:26
sorry gaetanoM, I cant get rid of the constant "id" and val,,, i want my array like this,,,, {"grndsrc":"a","fnamesrc":"","SnameSrctxt":"","TnameSrctxt":"","LnameSrctxt":"","TelSrcTxt":"","SSNSrcTxt":"","EmailSrctxt":"","DOBSrcTxt":""} – JSON May 05 '17 at 21:19
I really appreciate it gaetanoM,,, where can i read more about this function,,, I m not a programmer but I kind of learning on my own and of course from you guys here – JSON May 06 '17 at 22:53
You may take a tour on stackoverflow for documentation. Click on the tag JavaScript or jQuery for instance. – gaetanoM May 07 '17 at 12:54

post certain value for each checked and unchecked checkbox

1 Answers1