當選擇圖像時更改變量的值

Question

我想從其中四個圖像中選擇一個圖像。然後我應該增加變量。如果我選擇其他圖像，那麼該變量應該改變，並採取該圖像的值。下面是代碼我有這麼遠，如果你想保持複選框，猜測後不工作

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

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

Answer 1

價格價值稍後，比你可以這樣做：

$('.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>

同樣在JSFiddle。