javascript - 选择图像时更改变量的值

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