Solved

JQuery - Two Odd Actions

Posted on 2015-02-21
3
89 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
[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
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 43

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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)

752 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