Solved

How to  get values of selected checkboxes in jQuery

Posted on 2016-08-23
17
77 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 9

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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

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 9

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 9

Expert Comment

by:James Bilous
ID: 41767272
Did you remember the quotes on $("#chkid|" + $(this.val())
0
 

Author Comment

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

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 9

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 58

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 58

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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This article discusses how to implement server side field validation and display customized error messages to the client.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

622 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