How to get values of selected checkboxes in jQuery

How to get the values of selected checkboxes in a group using jQuery?  
I have  test code so far in javascript, see attached
I need to get value="#CHECK_NUM#" to a list with comma separator:
test.txt
jfreeman2010Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jfreeman2010Author Commented:
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>
0
James BilousSoftware EngineerCommented:
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());

Open in new window

0
jfreeman2010Author Commented:
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?
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

James BilousSoftware EngineerCommented:
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>

Open 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>

Open in new window


Here is a good primer on JQuery if you're still confused JQuery Fundamentals
0
jfreeman2010Author Commented:
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.
0
James BilousSoftware EngineerCommented:
Maybe try:

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

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

Open in new window

0
jfreeman2010Author Commented:
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
0
James BilousSoftware EngineerCommented:
Did you remember the quotes on $("#chkid|" + $(this.val())
0
jfreeman2010Author Commented:
yes, I copy/past in for whole line ....
0
James BilousSoftware EngineerCommented:
escape the bar with double backslashes

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

Open in new window

0
jfreeman2010Author Commented:
this is what I am getting:  [object Object]
0
James BilousSoftware EngineerCommented:
Sorry - add val() at the end like so:

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

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jfreeman2010Author Commented:
yes, it works!!! thank you very much for all your help!!!!
1
jfreeman2010Author Commented:
thank you for hep!!
1
Julian HansenCommented:
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>

Open 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());
  });

Open in new window

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

Open in new window

0
jfreeman2010Author Commented:
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.
0
Julian HansenCommented:
You are welcome - don't forget to enclose your jQuery in a document ready block

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

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.