Unique radio button styled as a custom div

Question

Unique radio button styled as a custom div

Struggling with creating a div on my website that functions like a radio button, similar to the layout seen on . The div should display product name, price, and image.

Appreciate any solutions or suggestions. Currently using Bootstrap 4 and JQuery/Javascript for development.

jquery html css bootstrap-4 radio-button

Answer 1

Answer №1

One way to easily handle button selection is by using a specific class to highlight the selected button. By toggling this class on button click events, you can achieve a simple and effective solution:

(1) Remove the highlighting class from all buttons.

(2) Add the highlighting class to the clicked button.

This method is straightforward, stylish, and gets the job done.

$('.myradio').click(function(){
  $('.myradio').removeClass('myactive');
  $(this).addClass('myactive');
});

.myradio{display:inline-block;}
.myactive{background:dodgerblue;color:white;}

/* Additional styling */
.myradio{padding:3px 7px;margin-left:10px;border:1px solid dodgerblue;border-radius:5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="myradio myactive">One</div>
<div class="myradio">Two</div>
<div class="myradio">Three</div>

If desired, assigning unique IDs to each button's div element can help in tracking the currently selected button. This information can be useful for identifying the active button and potentially transmitting relevant data elsewhere.

Answer 2

One way to easily handle button selection is by using a specific class to highlight the selected button. By toggling this class on button click events, you can achieve a simple and effective solution:

(1) Remove the highlighting class from all buttons.

(2) Add the highlighting class to the clicked button.

This method is straightforward, stylish, and gets the job done.

$('.myradio').click(function(){
  $('.myradio').removeClass('myactive');
  $(this).addClass('myactive');
});

.myradio{display:inline-block;}
.myactive{background:dodgerblue;color:white;}

/* Additional styling */
.myradio{padding:3px 7px;margin-left:10px;border:1px solid dodgerblue;border-radius:5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="myradio myactive">One</div>
<div class="myradio">Two</div>
<div class="myradio">Three</div>

If desired, assigning unique IDs to each button's div element can help in tracking the currently selected button. This information can be useful for identifying the active button and potentially transmitting relevant data elsewhere.

Answer 3

Answer №2

To enhance user experience, allow users to click on the label associated with the radio button. This triggers an action in the surrounding div, giving the impression that the div itself is being clicked. Remember to use the "for" attribute in the label to link it to the input's id.

By assigning the same name attribute to all radio buttons and distinct ids (e.g., name="myradio"), clicking one will deselect others and select only the clicked option. This consistent naming convention enables you to retrieve and utilize this data as needed.

CSS plays a crucial role in this setup. By targeting checked inputs (input[name="myradio"]:checked) and using the "+" selector to target the subsequent element (.clickable or .clickable .checked-box), we achieve the desired effect.

Included in the example is a snippet of jQuery code that logs the id of the selected box in the console for data tracking purposes.

For further information on the CSS selector used, refer to this link:

https://www.w3schools.com/cssref/sel_element_pluss.asp

<!DOCTYPE html>
<html>
    <head>
        <title>Code Sample</title>
        <style>
            // CSS styles omitted for brevity
        </style>
    </head>
    <body>
        <!-- Code sample for inline product selection boxes -->
        <div class="div-inline-list">
            <div class="product-container">
                <input id="prod1" type="radio" name="myradio">
                <label for="prod1" class="clickable"><span class="checked-box">&#10004;</span></label>
                <p class="product">Prod 1</p>
            </div>
            <div class="product-container">
                <input id="prod2" type="radio" name="myradio">
                <label for="prod2" class="clickable"><span class="checked-box">&#10004;</span></label>
                <p class="product">Prod 2</p>
            </div>
            <div class="product-container">
                <input id="prod3" type="radio" name="myradio">
                <label for="prod3" class="clickable"><span class="checked-box">&#10004;</span></label>
                <p class="product">Prod 3</p>
            </div>
        </div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('input[name="myradio"]').change(function(){
                    console.log("#" + $('input[name="myradio"]:checked').attr('id'));
                });
            });
        </script>
    </body>
</html>

Answer 4

To enhance user experience, allow users to click on the label associated with the radio button. This triggers an action in the surrounding div, giving the impression that the div itself is being clicked. Remember to use the "for" attribute in the label to link it to the input's id.

By assigning the same name attribute to all radio buttons and distinct ids (e.g., name="myradio"), clicking one will deselect others and select only the clicked option. This consistent naming convention enables you to retrieve and utilize this data as needed.

CSS plays a crucial role in this setup. By targeting checked inputs (input[name="myradio"]:checked) and using the "+" selector to target the subsequent element (.clickable or .clickable .checked-box), we achieve the desired effect.

Included in the example is a snippet of jQuery code that logs the id of the selected box in the console for data tracking purposes.

For further information on the CSS selector used, refer to this link:

https://www.w3schools.com/cssref/sel_element_pluss.asp

<!DOCTYPE html>
<html>
    <head>
        <title>Code Sample</title>
        <style>
            // CSS styles omitted for brevity
        </style>
    </head>
    <body>
        <!-- Code sample for inline product selection boxes -->
        <div class="div-inline-list">
            <div class="product-container">
                <input id="prod1" type="radio" name="myradio">
                <label for="prod1" class="clickable"><span class="checked-box">&#10004;</span></label>
                <p class="product">Prod 1</p>
            </div>
            <div class="product-container">
                <input id="prod2" type="radio" name="myradio">
                <label for="prod2" class="clickable"><span class="checked-box">&#10004;</span></label>
                <p class="product">Prod 2</p>
            </div>
            <div class="product-container">
                <input id="prod3" type="radio" name="myradio">
                <label for="prod3" class="clickable"><span class="checked-box">&#10004;</span></label>
                <p class="product">Prod 3</p>
            </div>
        </div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('input[name="myradio"]').change(function(){
                    console.log("#" + $('input[name="myradio"]:checked').attr('id'));
                });
            });
        </script>
    </body>
</html>

Unique radio button styled as a custom div

Answer №1

Answer №2

Similar questions

Accordion feature exclusively toggles the initial item

When submitting the form, does it trigger the opening of the PHP file?

Scrolling background for a nested Bootstrap modal

Tips for updating the text of an HTML element without deleting its children using JavaScript

Create a custom countdown using Jquery and Javascript that integrates with MySQL and PHP to display the datetime in the format Y-m-d

Eliminating the gray background using CSS

Troubleshooting issue: Bootstrap 4 Card trimming absolute content within div

Is there a way to perform unit testing on JavaScript code that runs following the completion of a CSS transitionEnd event

Animate a div once the parent section becomes visible while scrolling

Is there a way to update the value of an element that is continuously changing through a setInterval() function when hovering the mouse over it?

Issue with JavaScript: array maximum function malfunctioning

A creative CSS technique to eliminate borders from ul elements without relying on the calc() function

Arrange elements in a vertical layout and align them to the left when they exceed the boundaries of their container

The bootstrap-select selectpicker is encountering issues selecting options within the dropdown menu

Show a decimal value as an integer in Razor

Bootstrap 3 Full-Width Responsive Image Overlapping

Using the jQuery/JavaScript operator is similar to the SQL LIKE query with the wildcard %

Implementing scrolling functionality within a nested container

Are Firefox and Internet Explorer experiencing issues with CSS rendering accurately?

What is the reason behind my styled component only displaying the final state in its className logs?