Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


JQuery - Two Odd Actions

Posted on 2015-02-21
Medium Priority
Last Modified: 2015-02-22
I have some jquery that does two things - sums the total of the checkboxes selected and open/closes divs to share the additional fields that need to be completed.   It works great except for two issues - 1.  If I check one of the items that has been disabled (659 or 650), it still adds it to the total until I use a non-disabled one and then it gets removed.    2.   If I check the first checkbox and then check the 2nd checkbox, the div for the second check box does not open.    But if I check the 2nd one first, then it does.     Same with the other ones.   If the first one is checked, the others don't work.     This is being used in conjunction with ColdFusion scripting.    The value for the checkboxes is the itemnumber and the id is their cost since I needed to refresh both of them.    The first one works no matter what is going on.

<script type="text/javascript" >
        $('.itemnumber').click(function () {
            var total = 0;
            $(':checkbox:checked.itemnumber').each(function () {
                total +=;
			if ($('input:checkbox[value=656]').is(':checked')) {
			if ($('input:checkbox[value=658]').is(':checked')) {
			if ($('input:checkbox[value=999]').is(':checked')) {

Open in new window


<h2><input type="checkbox" name="itemnumber" value="656" id="550" class="itemnumber" <CFIF session.registration.itemnumber eq 656>checked</CFIF>> Register for a Course (#dollarformat(GetPrep.defaultprice)#)</h2>

<div id="preps" <CFIF listfindnocase(session.registration.itemnumber, "656")><CFELSE>style="display:none;"</CFIF>>
Please select pre-scheduled Prep Course
<TABLE cellpadding="5" cellspacing="0" border="0" width="80%">
<TR><TD></TD><TD><strong>Date</strong></TD><TD><strong>Site Location</strong></TD></TR>
<CFLOOP QUERY="PrepCourses">
<TR><TD><cfinput type="radio" value="#courseid#" name="courseid" checked="#trim(session.registration.courseid) eq '#courseid#'#"></TD><TD>#dateformat(startdate, "mmmm dd, yyyy")#</TD><TD>#courselocation#</TD></TR>

<h2><input type="checkbox" name="itemnumber" value="658" id="250" class="itemnumber"> Register for This</h2>

<div id="cefpexams" <CFIF listfindnocase(session.registration.itemnumber, "658")><CFELSE>style="display:none;"</CFIF>>
<cfinput type="radio" value="00/00/0000" name="cefptestid" checked="#trim(session.registration.cefptestid) is '00/00/0000'#"> I will take the exame at a proctored location<br />
<CFIF listlen(availdates)>
<CFLOOP List="#AvailDates#" index="i">
<cfinput type="radio" value="#dateformat(i, 'mm/dd/yyyy')#" name="cefptestid" checked="#trim(session.registration.cefptestid) eq '#i#'#"></TD><TD> #dateformat(i, "mmmm dd, yyyy")#

<h2><input type="checkbox" name="itemnumber" value="659" id="450" class="itemnumber"> Purchase This</h2>

<h2><input type="checkbox" name="itemnumber" value="999" id="250" class="itemnumber"> Register for This</h2>

<div id="efpexams" <CFIF listfindnocase(session.registration.itemnumber, "999")><CFELSE>style="display:none;"</CFIF>>
<cfinput type="radio" value="00/00/0000" name="efptestid" checked="#trim(session.registration.cefptestid) is '00/00/0000'#"> I will take the exam at a proctored location<br />
<CFIF listlen(availdates)>
<CFLOOP List="#AvailDates#" index="i">
<cfinput type="radio" value="#dateformat(i, 'mm/dd/yyyy')#" name="efptestid" checked="#trim(session.registration.cefptestid) eq '#i#'#"></TD><TD> #dateformat(i, "mmmm dd, yyyy")#

<h2><input type="checkbox" name="itemnumber" value="650" id="600" class="itemnumber"> Purchase This</h2>

Open in new window

Question by:digitalwise
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
LVL 10

Assisted Solution

by:Jeffrey Dake
Jeffrey Dake earned 400 total points
ID: 40623886
Your problem with if you check the first box the other ones not working is because of your return statement.  You have a block checking if checkbox with the value of 656 is checked. Since this will always return true after the first checkbox is selected you always get within that if conditional. Within that if statement you have a return statement that stops the rest of the code from executing.
LVL 44

Accepted Solution

Chris Stanyon earned 1600 total points
ID: 40624130
I would suggest a few changesto your HTML, and in turn your jQuery.

You're using the ID to store the cost. IDs are not designed for storing data, and they should begin with a letter. They shold also be unique in your document - currently they're not. For storing arbitrary data with an element, you should use the data attribute. I would also store the id of the relevant 'options' DIV in a data attribute. This will make working with your jQuery much easier. For example:

<input type="checkbox" name="itemnumber" value="656" class="itemnumber" data-cost="550" data-options="#preps"> Register for a Course

Open in new window

This gives you valid HTML, plus all the data you need to do the jQuery bit. You won't have to hardcode quite as much into your jQuery.

I would also bind the checkboxes to the change() event, not the click event. Afterall, it's only when they change that you need to do something.

All those 'returns' in your code have a bad, almost hacky feel to them, so I wouldn't take that approach.

Have a look at this as an alternative approach:

$('.itemnumber').change(function() {
	// Deselect the relevant checkboxes
	if ($(this).val() == '656' && $(this).prop('checked') == true) {
		$(':checkbox[value=659], :checkbox[value=650]').prop('checked', false);

	// Get the total
	var total = 0;
	$(':checkbox:checked.itemnumber').each(function () {
		total += parseInt($(this).data('cost'));

	// Show the options
	var options = $(this).data('options');
	if (options) {
		$(this).prop('checked') == true ? $(options).show() : $(options).hide(); 

Open in new window


Author Closing Comment

ID: 40624185
Thank you so much!    New to jquery and trying to upgrade existing software to more current technology!    I keep forgetting about those data tags!

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

722 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