jelukas/checkbox.html

## checkbox.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <form action="">

    	<label for="futbol" style="position: relative;">
    	    <input type="checkbox" value="futbol" id="futbol" name="deporte" >
    		<img src="http://icons.iconarchive.com/icons/martin-berube/sport/128/Soccer-icon.png" alt="">
    	</label>
    	<label for="tenis" style="position: relative;">
	    	<input type="checkbox" value="tenis" id="tenis" name="deporte" >
	    	<img src="https://cdn1.iconfinder.com/data/icons/fitness-sport/512/tennis-512.png" alt="">
    	</label>

    </form>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script>
    	$("input[name='deporte']" ).on('change', function(){

    		if($(this).is(':checked')){
    			$(this).parent().append('<img src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png" class="chekeo" style="position:absolute; top: 25%; left: 25%; width: 24px;" alt="" /> ');
    		} else {
    			$(this).parent().find('.chekeo').hide();
    		}
    	});

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
	<title>Bootstrap 101 Template</title>

	<!-- Bootstrap --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	</head>
	<body>
	<form action="">

	<label for="futbol" style="position: relative;">
	<input type="checkbox" value="futbol" id="futbol" name="deporte" >
	<img src="http://icons.iconarchive.com/icons/martin-berube/sport/128/Soccer-icon.png" alt="">
	</label>
	<label for="tenis" style="position: relative;">
	<input type="checkbox" value="tenis" id="tenis" name="deporte" >
	<img src="https://cdn1.iconfinder.com/data/icons/fitness-sport/512/tennis-512.png" alt="">
	</label>

	</form>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<script>
	$("input[name='deporte']" ).on('change', function(){

	if($(this).is(':checked')){
	$(this).parent().append('<img src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png" class="chekeo" style="position:absolute; top: 25%; left: 25%; width: 24px;" alt="" /> ');
	} else {
	$(this).parent().find('.chekeo').hide();
	}
	});

	</script>
	</body>
	</html>