Modify the appearance of a card upon radio button selection

Question

Modify the appearance of a card upon radio button selection

Can someone help me figure out how to change the background color of my card element when a radio button 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 a way to do this using only CSS, or do I need to use JavaScript or jQuery? I attempted it myself, but all the cards end up with a red background instead of just the selected one.


    $(document).ready(function(){

        $(".check-on").click(function(){

          $('.check-on').parent().parent().addClass('backgroundCard') 

        });

    });

Thank you in advance for your assistance.

javascript html jquery css bootstrap-5

Answer 1

Answer №1

When the input tag is nested within a label tag, there is no need to associate a label with it using the for attribute.
The styling of the card can be achieved without the use of JavaScript. Simply position the card adjacent to the input field, conceal the input by applying the d-none class, and utilize the adjacent element combinator.

Try interacting with the cards, they now function like radio buttons.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081b1c4dfc1dfc3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Answer 2

When the input tag is nested within a label tag, there is no need to associate a label with it using the for attribute.
The styling of the card can be achieved without the use of JavaScript. Simply position the card adjacent to the input field, conceal the input by applying the d-none class, and utilize the adjacent element combinator.

Try interacting with the cards, they now function like radio buttons.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081b1c4dfc1dfc3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Answer 3

Answer №2

$(document).ready(function(){
    $(".check-on").click(function(){
          $(this).parent().parent().addClass('backgroundCard')
    });
});

After clicking on the element with class "check-on", only keep focus on that specific element using the this selector instead of selecting all elements by class again.

Answer 4

$(document).ready(function(){
    $(".check-on").click(function(){
          $(this).parent().parent().addClass('backgroundCard')
    });
});

After clicking on the element with class "check-on", only keep focus on that specific element using the this selector instead of selecting all elements by class again.

Answer 5

Answer №3

You have the ability to toggle classes using the on change event.

If you are dealing with multiple radio button groups, you can extract the name attribute of those radios and use it to remove the class from the appropriate 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbdb0b0abacabadbeaf9feaf1eff1ed">[email protected]</a>/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>

Answer 6

You have the ability to toggle classes using the on change event.

If you are dealing with multiple radio button groups, you can extract the name attribute of those radios and use it to remove the class from the appropriate 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbdb0b0abacabadbeaf9feaf1eff1ed">[email protected]</a>/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>

Answer 7

Answer №4

You can achieve this without the need for Javascript or jQuery, just with a simple CSS solution.

/* This CSS snippet is used for normalizing styles. It can be skipped if not needed. */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.new {
  padding: 50px;
}

.form-group {
  display: block;
  margin-bottom: 15px;
}

.form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.form-group label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 10px;
}

.form-group label:before {
  content: '';
    position: absolute;
    -webkit-appearance: none;
    background-color: transparent;
    border: 2px solid #0079bf;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.form-group input:checked + label:after {
  content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079bf;
    z-index: -1;
  
}

<div class="new">
  <form>
    <div class="form-group">
      <input type="radio" id="$tri-1" name="radio">
      <label for="$tri-1">$tri-1</label>
    </div>
    <div class="form-group">
      <input type="radio" id="$tri-2" name="radio">
      <label for="$tri-2">$tri-2</label>
    </div>
    <div class="form-group">
      <input type="radio" id="$tri-3" name="radio">
      <label for="$tri-3">$tri-3</label>
    </div>
  </form>
</div>

Answer 8

You can achieve this without the need for Javascript or jQuery, just with a simple CSS solution.

/* This CSS snippet is used for normalizing styles. It can be skipped if not needed. */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.new {
  padding: 50px;
}

.form-group {
  display: block;
  margin-bottom: 15px;
}

.form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.form-group label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 10px;
}

.form-group label:before {
  content: '';
    position: absolute;
    -webkit-appearance: none;
    background-color: transparent;
    border: 2px solid #0079bf;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.form-group input:checked + label:after {
  content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079bf;
    z-index: -1;
  
}

<div class="new">
  <form>
    <div class="form-group">
      <input type="radio" id="$tri-1" name="radio">
      <label for="$tri-1">$tri-1</label>
    </div>
    <div class="form-group">
      <input type="radio" id="$tri-2" name="radio">
      <label for="$tri-2">$tri-2</label>
    </div>
    <div class="form-group">
      <input type="radio" id="$tri-3" name="radio">
      <label for="$tri-3">$tri-3</label>
    </div>
  </form>
</div>

Modify the appearance of a card upon radio button selection

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Next-auth custom authentication provider with unique backend

Accessing office documents such as XLS and PPT files directly within the browser window using Internet Explorer 7.0

Unexpected issue with controller functionality following modification to URL

What is the best way to extract data from various HTML files using RVEST and save it into an Excel spreadsheet?

Is there a way to troubleshoot the "module not found error" that keeps popping up when I attempt to execute the code following a smooth installation of sqlite3?

Explore the versatility of jQuery by utilizing multiple objects in your POST and GET requests to PHP for enhanced

Arrange the data in the table to ensure that it is organized neatly into the appropriate columns

Unlocking Discord Account Information through OAuth2

"Learn the art of combining an ajax request with a captivating background animation at the same time

Fetching image for jmapping AJAX request

Guide to selecting a date using JavaScript in Selenium with Ruby

Using jQuery to fill input fields automatically with a mouse click rather than using the keyboard

Tips for managing an event using the bxSlider callback API

Reloading a Nuxt.js page triggers the fetch function

Creating dynamic web pages using Smarty templating engine to render HTML

JavaScript Issue: Unable to Update or Delete Table Row Data

The React/Redux bundle.js file is overly large and bloated

Struggling with hashtags and ampersands in Angular when making an HTTP request

What could be causing my wrapper div to not clear properly?

Executing webpack with specific settings in Node.js