• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 684
  • Last Modified:

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?
0
synergiq
Asked:
synergiq
1 Solution
 
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

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now