Solved

How to  get values of selected checkboxes in jQuery

Posted on 2016-08-23
17
43 Views
Last Modified: 2016-08-25
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
Comment
Question by:jfreeman2010
  • 9
  • 6
  • 2
17 Comments
 

Author Comment

by:jfreeman2010
ID: 41767115
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
 
LVL 7

Expert Comment

by:James Bilous
ID: 41767134
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
 

Author Comment

by:jfreeman2010
ID: 41767149
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
 
LVL 7

Expert Comment

by:James Bilous
ID: 41767157
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
 

Author Comment

by:jfreeman2010
ID: 41767188
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
 
LVL 7

Expert Comment

by:James Bilous
ID: 41767240
Maybe try:

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

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

Open in new window

0
 

Author Comment

by:jfreeman2010
ID: 41767269
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
 
LVL 7

Expert Comment

by:James Bilous
ID: 41767272
Did you remember the quotes on $("#chkid|" + $(this.val())
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:jfreeman2010
ID: 41767282
yes, I copy/past in for whole line ....
0
 
LVL 7

Expert Comment

by:James Bilous
ID: 41767288
escape the bar with double backslashes

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

Open in new window

0
 

Author Comment

by:jfreeman2010
ID: 41767299
this is what I am getting:  [object Object]
0
 
LVL 7

Accepted Solution

by:
James Bilous earned 500 total points
ID: 41767305
Sorry - add val() at the end like so:

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

Open in new window

0
 

Author Comment

by:jfreeman2010
ID: 41767313
yes, it works!!! thank you very much for all your help!!!!
1
 

Author Closing Comment

by:jfreeman2010
ID: 41767321
thank you for hep!!
1
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41769826
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
 

Author Comment

by:jfreeman2010
ID: 41770221
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41770368
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now