12

Estoy haciendo un formulario para seleccionar el tipo de tarjeta a la hora de pagar y quiero que cuando seleccionen la imagen del tipo de tarjeta se le marque con un sombreado alrededor.

mi template es:

<form>
...
    <div class='formulario-tarjeta' class='row'>
            <div class="form-group row">
                <div class="col-xs-2 opcion-tarjeta"><input name="tipo" value="VISA" id="id_tipo_0" required="" type="radio" alt="Visa"><label for="id_tipo_0"><img src="{% static '/img/tarjetas/visa.png' %}" alt="Visa"></label></div>
                <div class="col-xs-2 opcion-tarjeta"><input name="tipo" value="VISA_DEBIT" id="id_tipo_1" required="" type="radio"><label for="id_tipo_1"><img src="{% static '/img/tarjetas/visa-electron.png' %}" alt="Visa Electrón"></label></div>
                <div class="col-xs-2 opcion-tarjeta"><input name="tipo" value="DINERS" id="id_tipo_2" required="" type="radio"><label for="id_tipo_2"><img src="{% static '/img/tarjetas/dinners-club.png' %}" alt="Dinner Club"></label></div>
                <div class="col-xs-2 opcion-tarjeta"><input name="tipo" value="AMEX" id="id_tipo_3" required="" type="radio"><label for="id_tipo_3"><img src="{% static '/img/tarjetas/amex.png' %}" alt="American Express"></label></div>
                <div class="col-xs-2 opcion-tarjeta"><input name="tipo" value="CODENSA" id="id_tipo_4" required="" type="radio"><label for="id_tipo_4"><img src="{% static '/img/tarjetas/codensa.png' %}" alt="Codensa"></label></div>
                <div class="col-xs-2 opcion-tarjeta"><input name="tipo" value="MASTERCARD" id="id_tipo_5" required="" type="radio"><label for="id_tipo_5"><img src="{% static '/img/tarjetas/mastercard.png' %}" alt="MasterCard"></label></div>
            </div>
...
</form>

y este mi css:

/*--- Formulario Compra ---*/
.formulario-tarjeta .opcion-tarjeta input[type='radio']{
    display: none;
}

.formulario-tarjeta .opcion-tarjeta label > img{
    border-radius: 5.6px;
    box-shadow: 0px 0px 10px rgba(5,171,168,1);
}

la segunda clase del CSS es son los atributos que quiero añadirle a la imagen una vez esté seleccionada

1 respuesta 1

11

Puedes cambiar el tipo de input para que, en vez de tipo radio, sea de tipo checkbox.

De esta manera, puedes asociar una label a dicho checkbox tal y como lo estabas haciendo mediante el atributo for y, mediante el selector + (elementos adyacentes), hacer referencia a la label adyacente y, por consiguiente, a la imagen que esta tiene dentro.

Por último, solamente tendrás que comprobar si el input está checkeado mediante el selector :checked. Utilizo el selector de atributo ^= que significa que busque todos los input que tengan un id que empiece por id_tipo_.

Tu ejemplo modificado (lo he simplificado un poco para que se viera el efecto sin tanto código):

/*--- Formulario Compra ---*/
.formulario-tarjeta .opcion-tarjeta input[type='checkbox']{
    display: none;
}

.formulario-tarjeta .opcion-tarjeta label > img{
    width: 400px;
    height: 300px;
    border-radius: 5.6px;
}

input[id^="id_tipo_"]:checked + label > img{   
    box-shadow: 0px 0px 10px rgba(5,171,168,1);
}
<div class='formulario-tarjeta row'>
   <div class="col-xs-2 opcion-tarjeta">
       <input name="tipo" value="VISA" id="id_tipo_0" required="" type="checkbox" alt="Visa">
       <label for="id_tipo_0">
          <img src="http://images.nationalgeographic.com.es/medio/2015/12/21/bf63ef82rio_narcea_tineo_720x480.jpg" alt="Visa">
       </label>
   </div>
   <div class="col-xs-2 opcion-tarjeta">
       <input name="tipo" value="VISA" id="id_tipo_1" required="" type="checkbox" alt="Visa">
       <label for="id_tipo_1">
          <img src="http://images.nationalgeographic.com.es/medio/2015/12/21/bf63ef82rio_narcea_tineo_720x480.jpg" alt="Visa">
       </label>
   </div>
</div>

3
  • Gracias por la respuesta. Necesito que sea del tipo radio porque según el tipo de tarjeta aparece un formulario u otro y no puede seleccionar 2 tipos de tarjetas al mismo tiempo.
    – F Delgado
    el 28 mar. 2018 a las 12:29
  • @FDelgado Pero aquí cada checkbox va a ir asociado a su tarjeta, por lo que podrás mostrar un formulario u otro de la misma manera, simplemente comprobando si el checkbox está chequeado o no. el 28 mar. 2018 a las 12:31
  • 1
    Tienes razón, puedo cambiarlo a checkbox sin problema, gracias.
    – F Delgado
    el 28 mar. 2018 a las 12:46

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.