<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<title></title>
</head>
<body>
<style type="text/css">
<!--
.onoff {
display: inline-block;
width: 80px;
height: 25px;
background: #707070;
margin: 2px 2px 1px 1px;
border-radius: 50px;
position: relative;
font-size: 16px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
fill:green;
}
.onoff input[type=checkbox] {
width: 80px; height: 20px; z-index: 1;
display: block; position: absolute;
}
.onoff+span{
width: 80px; height: 26px; z-index: 2;
display: inline-block; position: absolute;
}
.onoff:after {
content: 'Nee';
font: 12px/26px Arial, sans-serif;
color: #FF6600;
position: absolute;
right: 10px;
z-index: 0;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}
.MyIcon{
fill: #ff0000;
}
.onoff:before {
content: 'JA';
font: 12px/26px Arial, sans-serif;
color: #33cf33;
position: absolute;
left: 10px;
z-index: 0;
font-weight: bold;
}
.onoff label {
display: block;
width: 35px; height: 20px;
border-radius: 50px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
cursor: pointer;
position: absolute;
top: 3px; left: 3px; z-index: 1;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bfad 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bfad 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bfad 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bfad 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bfad 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}
.onoff input[type=checkbox]:checked + label {
left: 43px;
}
.onoff input[type=checkbox] {
visibility: hidden;
min-height: 10px;
}
-->
</style>
<?php
if(isset($_POST['verstuurd'])){
print "POST=". print_r($_POST,true);
}
$opties[1]['ischecked']=(key_exists('optie',$_POST)&&key_exists(1,$_POST['optie']))?' checked="checked"':'';
$opties[1]['info']='-1-';
$opties[1]['label']='optie1';
$opties[2]['ischecked']=(key_exists('optie',$_POST)&&key_exists(2,$_POST['optie']))?' checked="checked"':'';
$opties[2]['info']='-2-';
$opties[2]['label']='optie2';
$opties[3]['ischecked']=(key_exists('optie',$_POST)&&key_exists(3,$_POST['optie']))?' checked="checked"':'';
$opties[3]['info']='-3-';
$opties[3]['label']='optie3';
print '<form action="'.$_SERVER["SCRIPT_NAME"].'" name="frmAdd" method="post">';
foreach($opties as $key => $optie){?>
<div class="form-group">
<label class="control-label col-lg-4 col-md-4 col-sm-4" for="optie[<?php print $key;?>"> <?php print $optie['label'];?> :</label>
<div class="onoff">
<input class="checkbox col-lg-1" type='checkbox' id='optie[<?php print $key;?>]' name='optie[<?php print $key;?>]' <?php print $optie['ischecked'];?> />
<label class="col-lg-1" for="optie[<?php print $key;?>]">
<img height="15" width="15" src="hetpath/naar/een/icoontje.svg" alt="<?php print $optie['info'];?>" />
</label>
</div>
</div>
<?php }?>
<input name="verstuurd" id="submit" accesskey="E" type="submit" value="Enter">
</form>
</body>
</html>