当选择图像时更改变量的值

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。