Estoy tratando de que al marcar una opsion en el checkbox esta quede con un borde y no se porque no funciona.
Tambien lo intente hace dentro de JavaScript, pero al no conceguir nada, la imagen como el recuadro de seleccion lo hice dentro css.
Este es el codigo completo:
function actualizarValor(estaChequeado, valor) {
var suma_actual = 0;
var campo_resultado = document.getElementById('txtValor');
valor = parseInt(valor);
try {
if (campo_resultado != null) {
if (isNaN(campo_resultado.value)) {
campo_resultado.value = 0;
}
suma_actual = parseInt(campo_resultado.value);
}
} catch (ex) {
alert('No existe el campo de la suma.');
}
if (estaChequeado == true) {
suma_actual = suma_actual + valor;
$(this).closest("label").css('border', '3px solid black');
} else {
suma_actual = suma_actual - valor;
$(this).closest("label").css('border', '3px solid transparent');
}
campo_resultado.value = suma_actual;
}
.checkeable img {
width: 100px;
border: 5px solid transparent;
}
.checkeable input {
display: none;
}
.checkeable input:checked + img {
border-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Presupuesto</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container pt-5">
<h2>Mi Bicicleta</h2>
<div style="padding-top: 1rem;">
<p>Presupuesto</p>
<span style="font-size: 1.4rem;">U$S</span>
<input type="text" style="font-size: 1.4rem; padding: .4rem; border: none;" readonly id="txtValor" value="0">
</div>
<div class="pt-4">
<label class="checkeable">
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/bicycle-512.png"><br>
<input type="checkbox" value="60" onclick="actualizarValor(this.checked, this.value);"> Bicicleta Simple $60
</label>
<label class="checkeable ml-3">
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/bicycle-512.png"><br>
<input type="checkbox" value="86" onclick="actualizarValor(this.checked, this.value);"> Todo Terreno $86
</label>
</div>
<div class="pt-4">
<h4>Como quieres armar tu bicicleta?</h4>
...
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Agradezco de antemano!