I've tried a lot of diverse solutions given here on StackOverflow, but none of them worked for me.
I must add a class to a specific div when the checkbox assigned to it is selected, but I can't figure out what is not working for me!
Here is the code, hope you can help me!
HTML
<body>
<div class="riquadro_introduzione">
<p class="title">Selezione opere</p>
<p>Ora inizia a creare il tuo itinerario!</br>Queste sono le opere che il museo ti consiglia.</p>
<p> </p>
<p>Seleziona l'opera tramite l'apposita checkbox accanto al nome dell'opera stessa.</br></br>
Premi il pulsante AVANTI quando hai concluso le tue scelte!</p>
</div>
<div class="riquadro_content">
<div style="padding-top:20px;padding-left:11px;">
<div class="icona_galleria num1" id="divOpera1">
<p class="label-galleria">Opera 1</p>
<div class="squaredThree">
<input type="checkbox" id="chkOpera1"/>
<label for="chkOpera1"></label>
</div>
</div>
<div class="icona_galleria num2">
<p class="label-galleria">Opera 2</p>
<div class="squaredThree">
<input type="checkbox" id="chkOpera2"/>
<label for="chkOpera2"></label>
</div>
</div>
<div class="icona_galleria num3">
<p class="label-galleria">Opera 3</p>
<div class="squaredThree">
<input type="checkbox" id="chkOpera3"/>
<label for="chkOpera3"></label>
</div>
</div>
<div class="icona_galleria num4">
<p class="label-galleria">Opera 4</p>
<div class="squaredThree">
<input type="checkbox" id="chkOpera4"/>
<label for="chkOpera4"></label>
</div>
</div>
<div class="icona_galleria num5">
<p class="label-galleria">Opera 5</p>
<div class="squaredThree">
<input type="checkbox" id="chkOpera5"/>
<label for="chkOpera5"></label>
</div>
</div>
<div class="icona_galleria num6">
<p class="label-galleria">Opera 6</p>
<div class="squaredThree">
<input type="checkbox" id="chkOpera6"/>
<label for="chkOpera6"></label>
</div>
</div>
<div class="pulsante">
<a href="javascript:void(0);" style="left:40%;">Avanti</a>
</div>
</div>
</div>
</body>
jQuery
<script>
$(document).ready(function() {
$('#chkOpera1').change(function(){
if($(this).is(":checked")) {
$('#divOpera1').addClass("opera_selezionata");
}
});
});
</script>
EDIT:
CSS for the checkboxes:
.squaredThree {
width: 20px;
position: relative;
left:140px;
top: -36px;
}
.squaredThree label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left:-2px;
border-radius: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}
.squaredThree label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredThree label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.squaredThree input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
icona_galleria
,num1
andopera_selezionata
.opera_selezionata
?