JQuery - Two Odd Actions

Posted on 2015-02-21
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
LVL 10

Assisted Solution

by:Jeffrey Dake
Jeffrey Dake earned 100 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 43

Accepted Solution

Chris Stanyon earned 400 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to dynamically set the form action using jQuery.
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)

735 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