Choose the radio button upon clicking away from the input field

Currently, I have a standard Bootstrap 4 accordion that contains a radio button. Here is the code snippet:

<div class="card"> 
    <div class="card-header" id="headingOne"> 
        <h2 class="mb-0"> 
            <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#tm-stripe-div" aria-expanded="true" aria-controls="tm-stripe-div"> 
                <div class="d-flex justify-content-between"> 
                    <div class="stripe-payment-div"> 
                        <input class="form-check-input" type="radio" name="paymentRadio" id="stripePayment" value=""> 
                        <label class="form-check-label" for="stripePayment"> Credit Card (Stripe) </label> 
                    </div> 
                </div> 
            </button> 
        </h2> 
    </div> 
</div

My issue is that when I click outside of the input field, the radio button does not get selected. While I understand that using jQuery might be the best solution, I was wondering if there's a way to achieve this functionality with just CSS?

I am looking to have the radio button selected whenever a user clicks anywhere within the .card class. Thank you!

htmlcsstwitter-bootstrap

Answer №1

If you're looking to avoid using JavaScript, one approach is to utilize a common trick employed by custom form controls.

In essence, you can enclose your content with a label element and make use of the for attribute to target your radio button.

Additionally, in order to address an issue where click events were not being captured, I had to change the button element to an a.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card">
  <label for="stripePayment" class="mb-0">
    <div class="card-header" id="headingOne"> 
        <h2 class="mb-0"> 
            <a class="btn btn-link btn-block text-left" data-toggle="collapse" data-target="#tm-stripe-div" aria-expanded="true" aria-controls="tm-stripe-div"> 
                <div class="d-flex justify-content-between"> 
                    <div class="stripe-payment-div"> 
                        <input class="form-check-input" type="radio" name="paymentRadio" id="stripePayment" value=""> 
                        <span class="form-check-label" for="stripePayment"> Credit Card (Stripe) </span>
</div>
</div>
</a>
</h2>
</div>
</label>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The segmented button's dropdown menu in Bootstrap is malfunctioning on Firefox version 27.0.1

I'm attempting to create a basic search bar using Bootstrap's segmented button feature (check out an example at http://getbootstrap.com/components/#input-groups-buttons-segmented). This is the code I have so far, and it's accessible on jsfi ...

jqueryhtmlcsstwitter-bootstrap

Tips for creating a gradual fade-out effect on a bootstrap modal window

One issue I'm facing is with my modal dialog (#busyIndicator). It simply displays a message that reads "Please Wait". Sometimes, the operation it's tied to completes so quickly that the visual transition between showing and hiding the dialog beco ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having trouble with the functionality of my JavaScript slider

After attempting to incorporate a slider into my website, I encountered an issue where the slider was not functioning as expected. The slider I tried to implement can be found here: https://codepen.io/amitasaurus/pen/OMbmPO The index of the site can be a ...

jqueryhtmlcss

What is the best way to apply the background color from a parent div to a span element?

Is there a way to make the background color of the Reset Password section span the full width of the outer div and header section? html: <div class="forgot-inner"> <!--Forgot-header--> <div class="forgot-hea ...

htmlcss

Searching for hidden elements within a div using a filter option

An accordion is located inside a div and a search box has been added to the div with the intention of serving as a search filter. Some accordion elements are visible within the div while others are hidden. The problem arises when trying to make the filter ...

javascriptjqueryhtmlcss

Link to database stored in MySQL and HTML within a URL reference

I am currently working on creating an image link that allows users to define a folder in their settings. Below is the code I am using: <?php if (strpos($current_user_meta['UserRank'], 'Admiral ') !== false ) { // get the use ...

phphtmlmysqlimage

DOMPDF - Comparing background URL rendering between Linux and Windows

When converting HTML to PDF, my image doesn't show on a Linux server. On localhost, the image displays properly. Here is my CSS code: background: red url("<?php echo __DIR__ ?/my_img.png"); However, on the Linux server, the image does not appea ...

phphtmlcsslinuxdompdf

Migrating WordPress Gutenberg to a Separate React Component: Troubleshooting Missing CSS Styles

I am in the process of developing a standalone version of the Gutenberg block editor from Wordpress that can function independently outside of the Wordpress environment. My goal is to integrate the Gutenberg editor as a React component within an existing R ...

cssnode.jsreactjswordpresswordpress-gutenberg

A step-by-step guide on how to exclusively print items that have been selected using a checkbox in AngularJS

I have created two tables and added a checkbox for each one. Instead of default checkboxes, I have used images that change when clicked. Here is the code snippet: <button class="btn btn-lg btn-customPrint-md no-print" ng-click="checkBoxPrint2 = !check ...

htmlcssangularjscheckbox

What is the best way to split strings in an input field?

My task is to create a form with an input field and a dropdown list containing options for Checkbox and Radio. The user should enter text in the input field and select a type from the dropdown. For example: Input field: One, Two, Three Radio The expecte ...

javascripthtmlstringinput

How can I organize data from A to Z in alphabetical order in React Native when the user chooses the A to Z option from the dropdown menu?

I am working on a screen that can display up to 1000 data retrieved from the API. Here is the image: Now, I have implemented a drop-down box where users can select alphabetically from A to Z. After selecting an alphabetical order, the data will be arrang ...

javascriptandroidcssreact-native

What is the process for defining the default landing page route in Angular routing?

My application currently has only one route, and I want it to start with the URL http://localhost:4200/specialtyQ. However, my application is not loading properly. The code snippet below is what I am using to try to achieve this. How can I correct the URL ...

htmlangulartypescriptangular-ui-router

Automatically adjusting the height of a Bootstrap carousel as the token-input list grows in size

I am working on a carousel that functions as a form. One of the carousel items contains a multi-select box. How can I automatically increase the height of only that specific carousel item as the height of the multi-select box increases? The first image sh ...

csstwitter-bootstrapcarouselangular2-templatebootstrap-4

Creating dynamic and fluid motion with Bezier curves on canvas

I am currently working on creating a line that spans across the canvas from left to right. In these early stages of development, I am using a step-by-step animation approach with the following function: timer = window.setInterval(draw_line, 30); Here is ...

javascriptjqueryhtmlcanvas

I am looking to dynamically assign CSS classes to elements in my HTML document. Additionally, my project utilizes Angular 5 and Bootstrap version 3.3.7

I am currently in the process of generating a table using data obtained from a JSON. Due to the potential for a large amount of data, I have implemented a loop to create all the rows within the table. My goal is to enable users to click on any specific row ...

htmlcssangulartwitter-bootstrap-3

The content inside the HTML body doesn't fully encompass the dimensions of the mobile screen

I am working on making my application flexible by using 100vw width and 100vh height for the components. Everything displays perfectly in any resolution on a computer browser, but when viewed on a mobile device, an empty background is drawn below the bod ...

htmlcssfrontend

How can I add text to the title of a border using Bootstrap5?

I am attempting to create a design where text appears within the border of an element. I am currently utilizing Bootstrap 5 and jQuery for this project. Despite my efforts with fieldset and legend elements, I have not been successful in achieving the desir ...

htmljquerycsstwitter-bootstrapbootstrap-5

How can one utilize a second drop-down list in asp.net to alter the selected index and visibility of a drop-down list?

I am working on an asp.net application that includes a drop down list with the following structure: <asp:DropDownList runat="server" ID="ddlChanges" CssClass="selectstyle" onchange="javascript:ddlChangesChanged();"> <asp:ListItem Text="-- Select ...

javascriptc#jqueryhtmlasp.net

Aligning CSS border headers in a slanted or rotated table cell format

Is there a way to create slanted or rotated table headers in HTML? How can I ensure that the slanted inner-side header border aligns perfectly with the vertical border of the table cell element? Here is an example of the HTML code: <table> < ...

htmlcss

Combining left-aligned and centered elements within a grid using flexbox

Looking to create a fluid responsive grid layout using flexbox, without the need for media queries. The number of elements in the grid can vary and each item should have a fixed, equal width with left alignment. The entire group should have equal left and ...

cssflexbox