[RESOLVED] get checkbox id when clicked

This site is best viewed in a modern browser with JavaScript enabled.

[RESOLVED] get checkbox id when clicked

KarneeKarnay

I'm new to using jquery but in my crazy mind this is possible. The following code detects if a checkbox is changed. What I want to do is get the id of the checkbox that is clicked. Is that doable.

This is what I have so far.

$(document).ready(function(){
    $(":checkbox").change(function(){
		if($(this).attr("checked"))
		{
				//call the function to be fired
				//when your box changes from
				//unchecked to checked
				//alert("checked");

			if($(this) == $("#checkbox3_0"))
			{
				alert("Success");
			}
			else
				alert("checked");
	}
	else
	{
			//call the function to be fired
			//when your box changes from
			//checked to unchecked
		//alert("unchecked");
	}
});
});

nap0leon

I think you are looking for

$(this).attr('id')

To see if is is checked or not, I had to push all checkced items into an array and see if the one I am working with is in that list or not. There may be a better way to do this:

$(document).ready(function(){
    $(":checkbox").change(function(){
		var checkboxIDs = [];
		$(":checkbox:checked").each(function(index){
		    checkboxIDs.push($(this).attr('id'));
		})
		if(checkboxIDs.indexOf($(this).attr('id')) > -1)
		{
			console.log($(this).attr('id') + ' checked');
		}
		else
		{
			console.log($(this).attr('id') + ' unchecked');
		}
    });
});

It works on this test page:

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>IIS7</title>
	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script>
$(document).ready(function(){
    $(":checkbox").change(function(){
		var checkboxIDs = [];
		$(":checkbox:checked").each(function(index){
		    checkboxIDs.push($(this).attr('id'));
		})
		if(checkboxIDs.indexOf($(this).attr('id')) > -1)
		{
			console.log($(this).attr('id') + ' checked');
		}
		else
		{
			console.log($(this).attr('id') + ' unchecked');
		}
    });
});
</script>
</head>

<body>

<fieldset id="checkbox_input">
    <legend>Sample checkbox inputs</legend>
    <input type="checkbox" name="sample-checkbox" id="cbx_country1" value="India" />India
    <input type="checkbox" name="sample-checkbox" id="cbx_country2" value="America" />America
    <input type="checkbox" name="sample-checkbox" id="cbx_country3" value="Africa" />Africa
    <input type="checkbox" name="sample-checkbox" id="cbx_country4" value="Srilanka" />Srilanka
</fieldset>
</body>
</html>

nap0leon

Found it...

$(this).is(':checked')