How to get values of selected checkboxes in jQuery

Here are the code:


function GenExcelMchk(chk){
            
 if (chk.length > 0){
   for (i = 0; i < chk.length; /i++)
     {
      if(document.PayList.check_list[/i].checked == true)
      {
                              
      var chkitemnum = 'chkid|' +i;
      
      alert('chkitemnum= ' + chkitemnum);

      }
     }
                   
  }
            

}

<form method="post" name="PayList">
<table width="100%">
<tr>
 ...........
  <td>
    <input type="button" id="Operation" name="Operation"
      onclick="GenExcelMchk(document.PayList.check_list)" value="Excel" size="6" />
  </td>
 .........
</tr>
</table>

.......

<table id="chkList" class="display">
<thead>
<tr>
  <th style="display:none;"></th>
  <th align="left" width="2%"></th>
  <th align="left" width="10%">Chk Number</th>
  <th align="left" width="20%">Chk Date</th>
  <th align="left" width="20%">Chk Amt</th>
</tr>
</thead>
<tbody>
<cfloop query="chkList" startrow="1" endrow="#chkList.recordcount#">
 <cfset rownum = currentrow - 1 />
 <tr>
   <td style="display:none;"></td>
   <input type="hidden" id="rowid" name="rowid" value="#currentrow#" />
   <input type="hidden" id="chkid|#rownum#" name="chkid|#rownum#"  value="#CHECK_NUM#" />
   <td><input type="checkbox" name="check_list" id="check_list" value="#rownum#" ></td>
   <td align="left">#chkList.CHK_NUM#</td>
   <td align="left">#chkList.CHK_DATE#</td>
   <td align="left">#chkList.CHK_AMT#</td>
  </tr>
</cfloop>
</tbody>
</table>
</form>

I'm not a ColdFusion guy so excuse my naivete, but you would essentially select all checked inputs, iterate through them adding them to a list, then call join on that list at the end to get the values as a comma separated string.

var someList = [];
$("input:checked").each(function() {
   someList.push($(this).val());
});

console.log(someList.join());

Select allOpen in new window

Thank you very much for reply.  I am new to jQuery and did not know how to make use of your code.  
How to link your code to my check_list checkbox?

You would include jQuery in your page with a tag

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

Select allOpen in new window

Then in a script tag, include my code:

<script>
var someList = [];
$("input:checked").each(function() {
   someList.push($(this).val());
});

console.log(someList.join());
</script>

Select allOpen in new window

Here is a good primer on JQuery if you're still confused JQuery Fundamentals

Hi James - you code give me the value of the checkbox, ex. 0, 1, 2, 3.  
I need the value of the this:  <input type="hidden" id="chkid|#rownum#" name="chkid|#rownum#"  value="#CHECK_NUM#" />

The value="#CHECK_NUM#" = string value like '12.0.2'....

thank you for your help.

Maybe try:

<script>
var someList = [];
$("input:checked").each(function() {
   someList.push($("#chkid|" + $(this).val()));
});

console.log(someList.join());
</script>

Select allOpen in new window

I got this error:
Error: Syntax error, unrecognized expression: #chkid|0
      

...value:null},ga.error=function(a){throw new Error("Syntax error, unrecognized exp...

thanks for helping

Did you remember the quotes on $("#chkid|" + $(this.val())

yes, I copy/past in for whole line ....

escape the bar with double backslashes

   someList.push($("#chkid\\|" + $(this).val()));

Select allOpen in new window

this is what I am getting:  [object Object]

yes, it works!!! thank you very much for all your help!!!!

thank you for hep!!

Bear in mind if you are going to be using JQuery - you should include it in a document ready section i.e.

<script>
// This basically prevents the code from running until
// the document is ready.
$(function() {
  var someList = [];
  $("input:checked").each(function() {
     someList.push($("#chkid\\|" + $(this).val()).val());
  });

  console.log(someList.join());
});
</script>

Select allOpen in new window

Also, bear in mind that the above solution will find ALL Checked checkboxes on the page - not just ones in a particular group. This may work on a page that only has target checkboxes on it - but if you were to include another group of checkboxes you wanted to exclude from this you would need to isolate the checkbox group you are interested - usually by enclosing the group in a container with an id or class or giving the checkboxes themselves a class - something like
Container Class

  $(".checked-group input:checked").each(function() {
     someList.push($("#chkid\\|" + $(this).val()).val());
  });

Select allOpen in new window

Per Checkbox Class

  $("input.grouped-checkbox:checked").each(function() {
     someList.push($("#chkid\\|" + $(this).val()).val());
  });

Select allOpen in new window

Hi Julian,

Very good suggestion.  I need this jQuery code as part of interface coded in coldfusion, and only have one group of checkboxes so that code will work for now.   I will keep in mine that if I have more then one group of checkboxes, will need to include the group id.

Thank you very much for your suggestion.

You are welcome - don't forget to enclose your jQuery in a document ready block

$(function() {
   // JQuery code here
});

Select allOpen in new window