Solved

JQuery - Two Odd Actions

Posted on 2015-02-21
3
83 Views
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.

JQUERY
<script type="text/javascript" >
    $(document).ready(function(){
        $('.itemnumber').click(function () {
            var total = 0;
            $(':checkbox:checked.itemnumber').each(function () {
                total += +this.id;
            });
            $('#ordertotal').val(total);
			
			if ($('input:checkbox[value=656]').is(':checked')) {
			$('input:checkbox[value=659]').attr('checked',false);
			$('input:checkbox[value=650]').attr('checked',false);
			 $('#preps').fadeIn();
        	return;
			}
			$('#preps').fadeOut();
			
			if ($('input:checkbox[value=658]').is(':checked')) {
			 $('#cefpexams').fadeIn();
        	return;
			}
			$('#cefpexams').fadeOut();
			
			
			if ($('input:checkbox[value=999]').is(':checked')) {
			 $('#efpexams').fadeIn();
        	return;
			}
			$('#efpexams').fadeOut();
			
        });
		
		
		
    });
    </script>

Open in new window


HTML

<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>
</CFLOOP>
</TABLE>
</div>

<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")#
</CFLOOP>
</CFIF>
</div>


<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")#
</CFLOOP>
</CFIF>
</div>


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

Open in new window

0
Comment
Question by:digitalwise
3 Comments
 
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.
0
 
LVL 42

Accepted Solution

by:
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'));
	});
	$('#ordertotal').val(total);

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

Open in new window

0
 

Author Closing Comment

by:digitalwise
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!
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

by Julian Matz As of jQuery (http://jquery.com/) 1.4 the .live() method (http://api.jquery.com/live/) supports custom events as well as some standard JavaScript events that it previously didn't support. Among these is the submit event. Unlike …
This article discusses how to create an extensible mechanism for linked drop downs.
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)

705 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

14 Experts available now in Live!

Get 1:1 Help Now