Ändern Sie den Wert einer Variablen, wenn ein Bild ausgewählt ist

Question

Ich möchte ein Bild aus vier von ihnen auswählen. Und dann sollte die Variable, die ich habe, erhöht werden. Wenn ich ein anderes Bild anwähle, sollte sich die Variable ändern und den Wert dieses Bildes annehmen. Hier ist der Code, den ich bisher haben, die nicht

HTML

<div class="checkbox"> 
<input type="checkbox" name="paroxi" value="10"><br> 
</div> 

CSS

.checkbox{ 
width: 23px; 
height: 21px; 
background: black; 
visibility:hidden; 

} 
.checked{ 
background: red; 
visibility:block; 
} 

JAVASCRIPT funktioniert

$(".checkbox").click(function(){ 
$(this).toggleClass('checked') 
}); 

Answer 1

Wenn Sie wollen die Kontrollkästchen halten, raten zu posten Preiswert später, als Sie es auf diese Weise tun können:

$('.image-selection input').on('change', function(e) { 
 
\t $('.selected-value').text($('.image-selection input:checked').val()); 
 
}).trigger('change');

.image-selection input { 
 
    display: none; 
 
} 
 
.image-selection input:checked + img { 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, .4); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="image-selection"> 
 
    <label for="checkbox-1"> 
 
     <input id="checkbox-1" name="image-input" type="radio" value="10" checked="checked" /> 
 
     <img src="http://placehold.it/150x150" /> 
 
    </label> 
 
    <label for="checkbox-2"> 
 
     <input id="checkbox-2" name="image-input" type="radio" value="20" /> 
 
     <img src="http://placehold.it/150x150" /> 
 
    </label> 
 
    <label for="checkbox-3"> 
 
     <input id="checkbox-3" name="image-input" type="radio" value="30" /> 
 
     <img src="http://placehold.it/150x150" /> 
 
    </label> 
 
    <label for="checkbox-4"> 
 
     <input id="checkbox-4" name="image-input" type="radio" value="40" /> 
 
     <img src="http://placehold.it/150x150" /> 
 
    </label> 
 
</div> 
 
<p>Price: <span class="selected-value"></span></p>

Auch auf JSFiddle.