My question is very simple : how to add a background color to my card element when the button radio is selected ?
<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>
Is there any way to achieve this with just css or I have to use javascript or jquery ? I tried to do this but all of the cards are in a red backgroundColor instead of just the card where the radio is selected.
$(document).ready(function(){
$(".check-on").click(function(){
$('.check-on').parent().parent().addClass('backgroundCard')
});
});
Thanks a lot for your help.
for attribute when the input tag is inside a label tag.d-none class, and use the adjacent element combinator.Try to click the cards. They work as radio buttons now.
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')
});
});
once you have focused on the clicked element, keep focus on that only using this selector. You where again selecting all by class
You can add and remove class with on change event.
In case you have multiple radio groups, you can get the name of those radio and based on this you can remove the class of the correct cards:
$(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>