1

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!

2 respuestas 2

1

En estos casos es cuando rogamos por el selector -no soportado- :has, entonces como no podemos seleccionar a elementos padres en CSS sugiero que utilice como elemento pivote al <label> y utilizar una clase auxiliar selected:

function actualizarValor(checkeable) {
  var campo_resultado = document.getElementById('txtValor');
  valor = parseInt(campo_resultado.value);
  try {
    if (campo_resultado != null) {
      if (isNaN(campo_resultado.value)) {
        campo_resultado.value = 0;
      }
    }
  } catch (ex) {
    alert('No existe el campo de la suma.');
  }
  
  var checkbox = checkeable.getElementsByTagName('input')[0];
  checkbox.checked = !checkbox.checked;
  if(checkbox.checked){
    checkeable.classList.add('selected');
    campo_resultado.value = valor+parseInt(checkbox.value);     
  }else{
    checkeable.classList.remove('selected');
    campo_resultado.value = valor-parseInt(checkbox.value);     
  }    

  
}
.checkeable input {
  display: none;
}
.checkeable img {
  width: 100px;
  border: 5px solid transparent;
}
.checkeable input {
  display: none;
}
.checkeable.selected {
  outline: 5px solid 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 for="nadie" class="checkeable"  onclick="actualizarValor(this);">
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/bicycle-512.png"><br>
<input type="checkbox" value="60"> Bicicleta Simple $60
</label>

<label for="nadie" class="checkeable ml-3" onclick="actualizarValor(this);">
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/bicycle-512.png"><br>
<input type="checkbox" value="86" > 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>

3
  • Prodrias decirme porque colocas este for="nadie"? Gracias por la respuesta!
    – user101604
    Commented el 14 ene. 2020 a las 22:48
  • Es para que no se dispare dos veces onClick, es un comportamiento especial de un input dentro de un label.
    – Sal
    Commented el 14 ene. 2020 a las 23:26
  • Ah ok... no lo estaba entendiendo. Muchas gracias!
    – user101604
    Commented el 15 ene. 2020 a las 1:47
0

Puedes jugar con la propiedad .css de jquery:

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 input {
  display: none;
}
.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>

3
  • Gracias, pero no funciona. Puede ser el CSS?
    – user101604
    Commented el 14 ene. 2020 a las 18:07
  • Tambien lo puedes hacer con addClass() y removeClass(), con 2 clases en css, uno con el borde transparente y el otro con el borde que quieras
    – Fergush
    Commented el 14 ene. 2020 a las 18:14
  • No no... sigue sin funcionar.. Tambien lo actualice y nada
    – user101604
    Commented el 14 ene. 2020 a las 19:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.