Update AJAX get with checkbox values as they get checked/unchecked

I am trying to update an interface by checking/unchecking checkboxes so as the user does this the ajax request gets updated to reflect what's only checked

I have working on it's own meaning, I get all the checkboxes with the right values and the AJAX part is working fine (as in manualy)

My first step is to console.log() what I'm checking/unchecking and Im' getting stuck cause I'm only recording the first checkbox checked.

this is my HTML code:
<li>
<input type="checkbox" class="spaceTerm" name="team" value="2011">
</li>
<li>
<input type="checkbox" class="spaceTerm" name="team" value="2012">
</li>
<li>
<input type="checkbox" class="spaceTerm" name="team" value="2013">
</li>
<li>
<input type="checkbox" class="spaceTerm" name="team" value="archive">
</li>
....

Open in new window


This is my js code:

var termString;
$('.spaceTerm').on("click", function(){
	termString += $(this + ':checked').val();
	console.log(termString + " is checked");
});

Open in new window


is not adding or removing values from the string... I guess I'm a little confused on how I should approach this
vthunder70Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Chris StanyonConnect With a Mentor Commented:
Not entirely clear what you need. Are you wanting a single string containing all the values that are checked.

Have at look at this fiddle - I've used an array instead of a string as you'll have more flexibility:

http://jsfiddle.net/ChrisStanyon/n9vbL/

If at some point you're going to submit the form, then you'll need to name your checkboxes as an array (with square brackets), otherwise you'll only ever get the last value:

name="team[]"

Then you're receiving script will get an array called team that you can loop through to get the values of those boxes that are ticked
0
 
vthunder70Author Commented:
The array part makes total sense. The only thing I'm concerned about is that it loops through the whole list every time a box gets clicked.

Wouldn't be better to just push only when one gets checked and search through the array for the one that gets unchecked?

Is this possible?
0
 
Chris StanyonCommented:
It is possible, but the fastest way to do it is to loop through as I've done. Other wise you would need to run an if/else statement to decide whether to add/remove the value.

Performance really won't be an issue here.
0
 
vthunder70Author Commented:
I guess I'm splitting hairs... so you are right I don't think performance will be improved by adding/removing values to the array instead of looping through it.

Thank you!
0
 
Chris StanyonCommented:
No worries. I've been there. Trying to optimize code to such a point that you spend hours writing code only to find out that most humans can't detect a couple of milliseconds difference :)

The each() function in jQuery is already optimized to quickly loop through arrays of elements.

Beside - have you looked into trying to remove an array element by value - not easy!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.