Different Images for Check boxes (IE8 compatible)

Details
Here is a way to upload a different image for check boxes- it also works for older browsers like Internet Explorer 8.

First we need the basic html structure:


	
		<div id="SetCheck1" class="bedingungen">
	
		    <label for="demo_box_1" name="demo_lbl_1" class="css-label c_off" >
	
		    <input id="demo_box_1" name="Bedingungen" class="css-checkbox" type="checkbox" />
	
		    </label>  
	
		</div>




We also need some CSS for this Checkbox:


	.bedingungen .css-label {

	padding-left: 34px;

	height:22px; 

	display:inline-block;

	line-height:15px;

	background-repeat:no-repeat;

	background-position: 0 0;

	font-size:15px;

	vertical-align:middle;

	cursor:pointer;

	}

	.bedingungen .css-label {

	background: url(off.png) no-repeat;

	 }

	.bedingungen label.c_on {

	background: url(on.png) no-repeat;

	 }

	.bedingungen .css-label input {

	position: absolute; left: -9999px;

	}


Now we come to the tricky part: Until now, the checkbox will have a different appearance, but clicking on it will change absolutely nothing. We want to give it a different image when we clicked it. This can be done through the CSS from above and this javascript here:



function setupLabel() {
   if ($('.css-label input').length) {
      $('.css-label').each(function(){
         $(this).removeClass('c_on');
      });

      $('.css-label input:checked').each(function(){
         $(this).parent('label').addClass('c_on');
      });
   };
};
$(document).ready(function(){
   $('.css-label, .label_radio').click(function(){
   setupLabel();
});
setupLabel();
}); 



You also need JQuery for this, so you need to include this line as well:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    Last Changes

    1. More changes, added a lot of new Terraristic photos, drastically improved contact form [22.05.2017]
    2. Overall adjustments: Archive added for "Terraristic", removed "Blog" and "Programs" (since outdated) [14.05.2017]
    3. Added "Watercreature Details" to Creatures: Creatures [01.03.2017]
    4. Added "Thunder Bug Life Cycle" to Creatures: Creatures [23.02.2017]
    5. Added "Xanothl " to Creatures: Creatures [12.02.2017]

     For older changes, have a look at the website's history