• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 94
  • Last Modified:

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
0
jfreeman2010
Asked:
jfreeman2010
  • 9
  • 6
  • 2
1 Solution
 
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 9
  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now