Change background of a card when radio selected-CodePudding

My question is very simple : how to add a background color to my card element when the button radio is selected ?

<div >
            <label for="'.$abreviation.'">
                <div >
                    <div >
                        <input type="radio" id="'.$abreviation.'" name="tri" value="'.$abreviation.'"  /> '.$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.

CodePudding user response：

$(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

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div >
    <label for="'.$abreviation.'">
        <div >
            <div >
                <input type="radio" id="'.$abreviation.'" name="tri" value="'.$abreviation.'"  /> '.$tri.'
            </div>
        </div>
    </label>
</div>

<div >
    <label for="'.$abreviation2.'">
        <div >
            <div >
                <input type="radio" id="'.$abreviation2.'" name="tri" value="'.$abreviation2.'"  /> '.$tri.'
            </div>
        </div>
    </label>
</div>

CodePudding user response：

You don't need to bind a label to an input with the for attribute when the input tag is inside a label tag.
The card can be styled without any JS. To do this, you can place a card next to the input field, hide the input using the 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 >
    <label>
        <input type="radio" name="tri" value="'.$abreviation.'"  />
        <div >
            <div >
                '.$tri.'
            </div>
        </div>
    </label>
</div>

<div >
    <label>
        <input type="radio" name="tri" value="'.$abreviation2.'"  /> 
        <div >
            <div >
                '.$tri.'
            </div>
        </div>
    </label>
</div>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">