Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Checkbox change not working with jquery

    I am trying to use the jquery code from this site.
    http://tutorialzine.com/2011/03/bett...es-jquery-css/

    Can someone tell me what the problem is.
    When i click on the button i do not get the alert message.
    When i click on the button text i get the alert message.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Better Check Boxes</title>
    	 
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <link rel="stylesheet" type="text/css" href="jquery.tzCheckbox/jquery.tzCheckbox.css" />
     
    </head>
    <body>
    	 
    <div id="page">
    	 
    <form method="get" action="./">
            <ul>
                <li>
                <label for="col_box">Test </label>
                <input type="checkbox" id="col_box" name="col_box"  />
                </li>
    		</ul>
    </form>
    	
    </div>
    	 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="jquery.tzCheckbox/jquery.tzCheckbox.js"></script>
    <script src="js/script.js"></script>
    <script type="text/javascript" language="javascript">
    // wait until webpage is loaded
    $(document).ready(function(){
    	// check if any checkbox has changed state
       $(":checkbox").change(function(){
    	alert("Checkbox changed");
    });
    });
    </script> 	 
    </body>
    
    </html>
    
    script.js code
    $(document).ready(function(){
    	
    	$('input[type=checkbox]').tzCheckbox({labels:['Enable','Disable']});
    });
    
    jquery.tzCheckbox.js code
    (function($){
    	$.fn.tzCheckbox = function(options){
    		
    		// Default On / Off labels:
    		
    		options = $.extend({
    			labels : ['ON','OFF']
    		},options);
    		
    		return this.each(function(){
    			var originalCheckBox = $(this),
    				labels = [];
    
    			// Checking for the data-on / data-off HTML5 data attributes:
    			if(originalCheckBox.data('on')){
    				labels[0] = originalCheckBox.data('on');
    				labels[1] = originalCheckBox.data('off');
    			}
    			else labels = options.labels;
    		
    			// Creating the new checkbox markup:
    			var checkBox = $('<span>',{
    				"class"	:  $(this).attr('class') + " tzCheckBox "+(this.checked?'checked':''),
    				"html":	"<span class='tzCBContent'>"+labels[this.checked?0:1]+
    				"</span><span class='tzCBPart'></span>"
    			});
    			
    			// Inserting the new checkbox, and hiding the original:
    			checkBox.insertAfter(originalCheckBox.hide());
    
    			checkBox.click(function(){
    				checkBox.toggleClass('checked');
    				
    				var isChecked = checkBox.hasClass('checked');
    				
    				// Synchronizing the original checkbox:
    				originalCheckBox.attr('checked',isChecked);
    				checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
    			});
    			
    			// Listening for changes on the original and affecting the new one:
    			originalCheckBox.bind('change',function(){
    				checkBox.click();
    			});
    		});
    	};
    })(jQuery);
    
    tzCheckbox.css code
    .tzCheckBox{
    	background:url('background.png') no-repeat right bottom;
    	display:inline-block;
    	min-width:60px;
    	height:33px;
    	white-space:nowrap;
    	position:relative;
    	cursor:pointer;
    	margin-left:14px;
    	top: -3px;
    }
    
    .tzCheckBox.checked{
    	background-position:top left;
    	margin:0 14px 0 0;
    }
    
    .tzCheckBox .tzCBContent{
    	color: white;
    	line-height: 31px;
    	padding-right: 38px;
    	text-align: right;
    }
    
    .tzCheckBox.checked .tzCBContent{
    	text-align:left;
    	padding:0 0 0 38px;
    }
    
    .tzCBPart{
    	background:url('background.png') no-repeat left bottom;
    	width:14px;
    	position:absolute;
    	top:0;
    	left:-14px;
    	height:33px;
    	overflow: hidden;
    }
    
    .tzCheckBox.checked .tzCBPart{
    	background-position:top right;
    	left:auto;
    	right:-14px;
    }

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Because your .tzCheckbox method is hiding the checkbox input and replacing it with a span tag. Clicking on the span does not fire this:

    Code:
    $(":checkbox").change(function(){}
    because a checkbox has not been changed.

    However, when you click the text - which is defined as the label for the checkbox input - this does change the (now hidden) checkbox element and hence the .change function does fire.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Is there any way i can test the .tzCheckbox method for change instead of

    Code:
    $(":checkbox").change(function(){}

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    With your current code I think the following would fire OK in place of your existing code:

    Code:
    $(document).ready(function(){
    	// check if any checkbox has changed state
       $("li").click(function(){
    	alert("Checkbox changed");
    });
    });
    So instead of looking for change events on the input it's just looking for click within the li element, which have the same effect. You'd obviously need to make the selector more specific for more li elements.

  • #5
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Cheers SB65

    Works perfectly.
    Now i wish i hadn't wasted a whole day googling and trying different syntax as i would never have gone for that fix.

    Respect.


  •  

    Posting Permissions

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