Upon loading the page in Bootstrap 4.5, all radio buttons are activated simultaneously

<div class="form-row">
                            <div class="column">
                                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                    <label class="btn btn-primary active" for="visualContagi">
                                        <input type="radio" name="options" id="visualContagi" checked> Contagi
                                    </label>
                                    <label class="btn btn-primary" for="visualGuariti">
                                        <input type="radio" name="options" id="visualGuariti" checked> Guariti
                                    </label>
                                    <label class="btn btn-primary" for="visualDecessi">
                                        <input type="radio" name="options" id="visualDecessi" checked> Decessi
                                    </label>
                                    <label class="btn btn-primary" for="visualRicoveri">
                                        <input type="radio" name="options" id="visualRicoveri" checked> Ricoveri
                                    </label>
                                    <label class="btn btn-primary" for="visualTotPos">
                                        <input type="radio" name="options" id="visualTotPos" checked> Totale Positivi
                                    </label>
                                </div>
                            </div>
                        </div>

Hey there, I've encountered an issue with this radio button group within a form. Upon loading the webpage, all the buttons are automatically given the "active" class. I haven't added any JavaScript code; it's just Bootstrap being utilized, along with some CSS to eliminate the outline that appears when clicking on the buttons:

.btn-primary.focus, .btn-primary:focus {
    box-shadow: none;
}

I'm currently using the latest version of Firefox on macOS.

Answer №1

One thing to point out is that all your <input type="radio" elements currently have the checked attribute assigned to them. Removing this attribute should resolve the issue. Trust this suggestion proves useful!

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

Loading data with Ajax from a remote file using a specific identifier

Can someone lend me a hand with an issue I'm facing? I've set up a small like system here. Within my HTML file, I have various data with unique IDs. Take a look at the code in my remote.html file below: <span id="14">314</span> < ...

Bootstrap 3 Menu with Multiple Scrollable Columns

My Bootstrap 3 website has a navbar with two dropdowns. One of the dropdowns can have as few as 4 items or as many as 150. These items are short, only a few characters each. Initially, I created a 3-column dropdown using the solution provided in this answ ...

Span element hides the text in the background

Is there a more efficient way to accomplish this task? My current approach involves creating a slide-in background color effect when hovering over a link. However, I am encountering some difficulties with the CSS implementation. In my setup, each link cont ...

The back-to-top button guides users back to their last visited page

I'm excited to explore AngularJS and I want to add two "return to top" buttons on different pages. Here's what I have so far: Page 1: <h1 id = "top"> .......... <a href="#top" target = "_self">Return to Top</a> Page ...

Adjust the size at the location of the cursor

I am having trouble understanding how to implement zoom based on mouse position using this example here: (https://stackblitz.com/edit/js-fxnmkm?file=index.js) let node, scale = 1, posX = 0, posY = 0, node = document.querySelector('.f ...

Modify the button's background color for Django's image upload field

In one of the forms in my Django application, I have included a field that allows users to upload an image. Here is the code for this field: image = models.ImageField(upload_to=upload_location, null=True, blank=True) To display this field in my form tabl ...

The right column in Bootstrap is covering up the left column

Does anyone know why I am encountering an issue with my bootstrap navigation bar? When I try to have two columns in the navigation bar and resize the viewport, the right column overlaps the left one. This issue seems to be happening when the viewport size ...

Setting up the CSS loader in a Vue.js project using webpack

I am currently working on a new vue-cli project and have successfully installed the Pure.CSS framework using npm install purecss --save. However, I am struggling to seamlessly integrate, import, or load the css framework into my project. I am unsure of whe ...

Checking for correct HTML tags using JavaScript

Looking to validate some input in javascript and confirm if it is a valid HTML tag. Any straightforward methods with JQuery for this task? If not, any suggestions on how to achieve this using Regex? Thank you! ...

Can I apply zebra striping to specific columns in a b-table?

I am working with a basic b-table that has row striping enabled: <b-table :fields="myfields" :items="myData" striped> </b-table> Is it possible to apply striped formatting to only specific columns of the table, rather than ...

What is causing the issue of the div not being removed from the label renderer in three.js

Hello, I've been trying to solve this issue for the third time now without much success. The problem I'm facing is related to creating a div at runtime and then attempting to remove it after clicking on it. Although I've tried removing the d ...

What is the best approach to implement a basic image upload functionality?

I have a vision for my new website where users can upload an image with the click of a button, store it locally on one page and then retrieve its absolute URL to share on forums or other websites for preview purposes. While I've managed to create a fu ...

What could be causing spacing problems with fontawesome stars in Vue/Nuxt applications?

Currently, I am working on implementing a star rating system in Nuxt.js using fontawesome icons. However, I have encountered an issue where there is a strange whitespace separating two different stars when they are placed next to each other. For instance, ...

Achieving equal height divs using Bootstrap

I have a row of 8 divs arranged horizontally, and I am looking to make them all the same height. Right now, their heights vary based on the content inside each one. Can someone offer some assistance? I've attempted multiple solutions without success s ...

HTML - Custom styled <select> element

My goal is to fully customize the style of a component and hide the selector image. All graphical styles such as borders and shadows have been defined in a previous table. Now, I want to remove all styling from the selection menu, including the icon used t ...

Retrieving text content from the h1 element's class name

Trying to extract the text 'getthis' using the agility pack. <h1 class="point">getthis< span class="level">Niveau 0</span> </h1> Tried methods: var links = webBrowser1.Document.GetElementsByTagName("point"); foreach ...

Internet Explorer will automatically apply a blue border to a div element when a CSS gradient is utilized

I'm attempting to create a gradual fading gray line by using a div that is sized at 1x100px with a CSS gradient applied for the fade effect. The only issue I am encountering is in Internet Explorer where the div is displaying a blue border which I am ...

Wrapping text within an element positioned absolutely and lacking a defined width

I'm trying to figure out how to make a div expand to a certain point and then wrap to the next line after reaching 200px. Currently, both the div and span are positioned absolutely in my element structure: <div><span></span>My text ...

Trouble with FilterBy Feature in Bootstrap-Table

I am attempting to use filtering functionality with a table that is populated via JSON, utilizing bootstrap-table by wenzhixin. HTML snippet: <button class="btn btn-primary" id="filterBtn">Filter</button> <div class="container"> &l ...

Updating spacing in JSX for CSS styling

Is there a way to remove white space from an object field in order to display it as a background image in CSS using JSX? renderImage(singleMedia, type) { let mediaType = singleMedia.mediaType; if(type == "image")){ var mediaPreview = singleMedia.m ...