Watch for checkbox check with jQuery

I have an unlimited number of checkboxes on my page. Every checkbox is in it's own list item. I want to watch all of them and perform an ajax request if one is ticked. They all have a class of checkbox

I could just use $('.checkbox').click but I have another function that automatically checks the checkbox wherever the user clicks on the list item so the user won't necessarily have to click the checkbox.

Is there a way to do this?
LVL 2
synergiqAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
Hello synergiq,

>but I have another function that automatically checks the checkbox wherever the user clicks on the list item so the user won't necessarily have to click the checkbox.

Lot of way inside your function, check this article : http://drupal.org/node/116548

Regards
0
synergiqAuthor Commented:
I didn't think that because the checkbox is inside the li they have to click the li to enable it anyway.

Now I have another problem though. I've created a function that logs the id of the clicked checkbox to the console. This will be replaced by the ajax request eventually.

I've added the html and the js to the code snippet so you can see what I'm talking about.

If you click the label now it logs the id to the console twice. How can I stop this?
<li><input type="checkbox" id="cb1" class="checkbox"/><label for="cb1">List Text</label></li>

$('li').click(function(){				$($(this).children('.checkbox')).attr('checked', true);			console.log($(this).children('.checkbox').attr('id'));
});

Open in new window

0
hieloCommented:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript">
	$(function(){
		$('.checkbox').change(function(event){
			if(this.checked)
			{
				alert("Log the checkbox here - it is checked");
			}
		});
	});

	</script>
</head>
<body>
<ul>
	<li>
		<input type="checkbox" id="cb1" class="checkbox" value='a' /><label for="cb1">List Text</label>
		<input type="checkbox" id="cb2" class="checkbox" value='b' /><label for="cb2">List Text</label>
		<input type="checkbox" id="cb3" class="checkbox" value='c' /><label for="cb3">List Text</label>
	</li>
<ul>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.