Mi pregunta es muy simple: ¿cómo agregar un color de fondo al elemento de mi tarjeta cuando se selecciona el botón de radio?
<div class="col-6 col-md-3 mt-4 text-center my-auto"> <label for="'.$abreviation.'"> <div class="card card-block d-flex"> <div class="card-body align-items-center d-flex justify-content-center"> <input type="radio" id="'.$abreviation.'" name="tri" value="'.$abreviation.'" class="check-on" /> '.$tri.' </div> </div> </label> </div>¿Hay alguna forma de lograr esto con solo css o tengo que usar javascript o jquery? Traté de hacer esto, pero todas las tarjetas están en un color de fondo rojo en lugar de solo la tarjeta donde se selecciona la radio.
$(document).ready(function(){ $(".check-on").click(function(){ $('.check-on').parent().parent().addClass('backgroundCard') }); });Muchas gracias por tu ayuda.
for cuando la etiqueta de input está dentro de una label de etiqueta.d-none y usar el combinador de elementos adyacentes .Trate de hacer clic en las tarjetas. Ahora funcionan como botones de radio.
input[type="radio"]:checked + .card { background: #f1f1f1; } <div class="col-6 col-md-3 mt-4 text-center my-auto"> <label> <input type="radio" name="tri" value="'.$abreviation.'" class="d-none" /> <div class="card card-block d-flex"> <div class="card-body align-items-center d-flex justify-content-center"> '.$tri.' </div> </div> </label> </div> <div class="col-6 col-md-3 mt-4 text-center my-auto"> <label> <input type="radio" name="tri" value="'.$abreviation2.'" class="d-none" /> <div class="card card-block d-flex"> <div class="card-body align-items-center d-flex justify-content-center"> '.$tri.' </div> </div> </label> </div> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">$(document).ready(function(){ $(".check-on").click(function(){ $(this).parent().parent().addClass('backgroundCard') }); }); una vez que se haya enfocado en el elemento en el que se hizo clic, manténgalo enfocado solo usando this selector. De nuevo seleccionaste todo por clase
Puede agregar y eliminar clases con on change .
En caso de que tenga varios grupos de radio, puede obtener el name de esos radios y, en función de esto, puede eliminar la clase de las tarjetas correctas:
$(this).attr('name'); $('.check-on').on('change', function() { let radioName = $(this).attr('name'); $(`.check-on[name=${radioName}]`).closest('.card.backgroundCard').removeClass('backgroundCard'); $(this).closest('.card').addClass('backgroundCard'); }); .card.backgroundCard { background: #f1f1f1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="col-6 col-md-3 mt-4 text-center my-auto"> <label for="'.$abreviation.'"> <div class="card card-block d-flex"> <div class="card-body align-items-center d-flex justify-content-center"> <input type="radio" id="'.$abreviation.'" name="tri" value="'.$abreviation.'" class="check-on" /> '.$tri.' </div> </div> </label> </div> <div class="col-6 col-md-3 mt-4 text-center my-auto"> <label for="'.$abreviation2.'"> <div class="card card-block d-flex"> <div class="card-body align-items-center d-flex justify-content-center"> <input type="radio" id="'.$abreviation2.'" name="tri" value="'.$abreviation2.'" class="check-on" /> '.$tri.' </div> </div> </label> </div>