www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] get checkbox id when clicked

  1. #1
    Join Date
    Mar 2013
    Posts
    61

    resolved [RESOLVED] get checkbox id when clicked

    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.

    Code:
    $(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");
    		}
        });
    });

  2. #2
    Join Date
    Nov 2007
    Posts
    413
    I think you are looking for
    Code:
    $(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:
    Code:
    $(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:
    Code:
    <!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>
    Last edited by nap0leon; 07-05-2013 at 12:14 PM.

  3. #3
    Join Date
    Nov 2007
    Posts
    413
    Found it...
    Code:
    $(this).is(':checked')

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles