The impact of Bootstrap CSS on the functionality of radio buttons

Encountering an issue with radio buttons in combination with bootstrap and javascript, where querying the selected radio button results in reading the previous selection instead of the current one.

A Minimal Working Example (MWE) has been created to demonstrate this problem. To see it in action, turn on Console:

https://jsbin.com/pasujeqeli/edit?html,output

Upon clicking 'Zero', the console logs True. However, clicking 'Zero' again logs False, indicating that the logging is lagging behind the actual state of the radio buttons.

This bug can be replicated even without using bootstrap.css by clicking on the label associated with the radio button instead of the button itself.

It appears that clicking the label triggers the onclick method before updating the radio button, while clicking the button directly triggers the method after updating the button.

The question at hand is: How can the js or html be adjusted to reliably query the current state of the radio buttons?

javascripthtmlcsstwitter-bootstrap-3radio-button

Answer №1

If you're looking for a straightforward and effective solution, consider incorporating the function within the onchange event for each input as shown below:

<label class="btn btn-primary active">
    <input type="radio" onchange="checkform()" name="number" checked="" id="one" value="One" >One
</label>

The onchange event will trigger after the radio button is changed, unlike the onclick event which triggers before.

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

Error: The array index is outside the permissible range

Can someone assist me in understanding the cause of this error? IndexOutOfRangeException: Array index is out of range. (at Assets/Scripts/PlayerCar.js:73) CompareApproximately (det, 1.0F, .005f) UnityEditor.DockArea:OnGUI() Snippet from My code: var Gea ...

javascriptarrays

What is the best way to determine the number of lines within a textarea?

My goal is to accurately calculate the number of lines in a textarea, like so: line 1 line 2 line 3 line 4 which should equal 4 lines. Essentially, pressing enter once should create a new line. Unfortunately, the following code is not achieving this: v ...

javascriptjquery

How can you incorporate a custom button into the controlBar on videoJS in responsive mode?

The video player I have created using videoJS includes custom buttons in the control bar. These buttons are not clickable when viewed on mobile or tablet devices without forcing them to work. let myButton = player?.controlBar.addChild('button'); ...

javascripthtmlcssnext.jsvideo.js

If the color of the border matches and the width of the border is equal to

As I navigate through multiple divs, my goal is to identify those with a distinct blue border. Furthermore, if a main div possesses a blue border, I need to check for any inner divs that also have a blue border or a border width of 3px. If the main div has ...

jqueryhtmlcss

How can I designate unreleased files as dynamic entries in a webpack configuration?

Here is the configuration for webpack.config.js: const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const fs = require('fs'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require(&apo ...

javascriptnode.jswebpackconfigbundle

rearranging the sequence of buttons using JavaScript

I am faced with the challenge of making a series of buttons draggable and droppable within a parent div without using any external libraries at the request of the client. Although I could have easily accomplished this task with jQuery, it's an opportu ...

javascriptdrag-and-drop

What steps should I take to export a function from a React functional component in order to create a reusable library?

Currently, I am in the midst of developing a React component library and one of my components contains a function that I want to export. The purpose of the addParticle function is to enable users of the library to dynamically insert particles into a cont ...

javascriptreactjstypescriptnpmexport

Ensure that the background color of the radio buttons (Survey Scale CSS) changes after being selected, leaving only the chosen button with a different color

There is a problem with the radio buttons' background color not displaying correctly after being checked and for the unselected options. Here is the CSS code snippet: /*main rating class*/ .rating { position: inherit; display: inline-flex; widt ...

htmljquerycssbootstrap-4

There is no $key present within an AngularFireDatabase.object

I have encountered an issue in my Angular application while attempting to update records on a Firebase database. I am utilizing AngularFireDatabase to bind the list initially, which is then intended to be used for updating specific records. However, the ch ...

javascriptangularfirebasefirebase-realtime-database

switching back and forth between the registration and login forms

<script> $(document).ready(function(){ $("#register_link").click(function() { $("#login_or_register").empty(); $("#login_or_register").load("register_form.php"); }); $("#login_link").click(function() { $("# ...

javascriptjqueryhtmlcssajax

How can I replicate the Firefox style in IE8 using Bootstrap and CSS?

My webpage is styled with Bootstrap v2 and looks great in Firefox. However, I'm struggling to apply the same CSS color style in IE8: .navbar-inverse .navbar-inner { background-color: #1b1b1b; background-image: -moz-linear-gradient(top, #fab ...

csstwitter-bootstrap

How to vertically align elements using CSS in Firefox

In my project, I have created an unordered list with various bullet images and I am attempting to align the text for each list item vertically centered. Although this works perfectly in Chrome and Safari, I am encountering issues with Firefox where the ver ...

cssfirefox

Inline display with automatic margin

I am seeking guidance from someone with more experience to help identify the source of this margin. Your assistance is greatly appreciated! https://i.stack.imgur.com/46k7k.png Below is the CSS code in question: .logo-icon { background-image: url(&ap ...

htmlcss

Whenever Ionic is paired with LokiJS, it consistently results in the error message: "ionic.bundle.js:26794 TypeError: Cannot read property 'insert' of undefined"

Having faced numerous issues with SQLite, I decided to explore LokiJS as an alternative solution for my Ionic app. However, even with LokiJS, I encountered challenges. Currently, I have a simple code that should function smoothly: .controller('Proje ...

javascriptangularjscordovaionic-frameworklokijs

Change the toolbar's background color to a solid white, with no gradiation

CKEDITOR.replace( 'editor_1', { toolbar: [ { ..... }, ], uiColor: 'white', }); Unfortunately, the above code does not yield the desired outcome. .cke_top{background-color: white;} It appears that the specified CSS ...

javascripthtmlcssckeditor

Avoiding the collapse of the Bootstrap 4 navbar

Having trouble with the navbar collapsing on itself? The issue seems to occur around 1280px window size, but works fine when the window is wider or narrower. https://www.bootply.com/AcsaaqReAL .navbar-custom { background-color: #333333; border- ...

htmlcsstwitter-bootstrapbootstrap-4

The Angular Material error message is indicating that the function registerInput is not defined for this._chipList, causing

Issue Description Currently, I am encountering an error when attempting to retrieve input from an <input> tag and showcase it as chips in the graphical user interface (GUI). The console displays the following error message: "TypeError: this._chipLis ...

htmlangularangular-material

Offspring of div should have equal height without the top and bottom padding

Looking to ensure that the height of child divs matches the height of the parent divs. Currently, the divs expand as the page is resized. This is for search results, so there are multiple identical code blocks. function matchHeight() { $result = $(&a ...

javascriptjqueryhtml

Is there an easier way to coordinate CSS other than relying on JS?

It seems like I'm continuously resorting to using JavaScript too frequently for tasks that should ideally be achievable with CSS alone. Let's consider a specific scenario I'm tackling: div.outer { height:{Y}px } div.inner { padding-top:{Y} ...

javascriptjqueryhtmlcss

What is the best way to conduct a Javascript test using Jasmine?

I'm encountering an issue with testing this JavaScript code: $("#ShootBtn").on('click', () => foo.testFunc()); var foo = { testFunc: function() { hub.server.shoot(true, username, gameCode); } } For my testing framework, ...

javascriptjsonjasminekarma-jasmine