Questions tagged [radio-button]
Radio buttons are essential components commonly found in forms. Their purpose is to enable users to make a single selection from a predetermined set of options provided.
The goal is to display the <div class="resp"> below each radio button when it is selected, with different content in each <div class="resp">. The previously selected <div class="resp"> should be hidden when a new radio button is chosen. O ...
If I want my radio button to be green instead of the default options (default, primary, secondary), how can I achieve that? I attempted to override the color using the classes prop like this: const styles = theme => ({ radio: { colorPrimary: { ...
This is a follow-up question from a previous one on changing check boxes to radio buttons. Now, I need to display child radio buttons and change the background color when the parent radio button is active. The child radio buttons should be hidden and the b ...
Here is the style sheet code: select,input ,td a {border:1px solid green; width:25%;height:25px;font-size:20px;margin- left:.1em;} input.myradio {border:none;width:0%;height:0%;font-size:0%;} And here is the corresponding HTML code: <td><inpu ...
I have a product search box that allows users to search by Cartridge Name or Printer Name. These are different SQL queries, so I have created separate PHP files for each query. However, I am facing challenges in using jQuery to check the value of the radio ...
I have created a form that contains radio buttons. My next goal is to include a text area next to each group of radio buttons. This will allow the user to select an option either by clicking on the radio button or by typing in the corresponding value in t ...
Within this form, I have 2 radio buttons: <form action='' method='post' onsubmit='return checkForm(this, event)'> <input type = 'radio' name='allow' value='allow' checked>Allow ...
Does anyone know why my CSS3 pseudo elements are working fine in Chrome, but reverting back to default styling in Firefox for my radio button? Any suggestions? Check out this JSFIDDLE link for reference: JSFIDDLE Here is the HTML code snippet: <input ...
There are three sets of data (dataX, dataY, dataZ) that need to be assigned unique values out of a selection of three options (valueA, valueB, valueC). Each piece of data should be linked to one value and each value should have only one data associated wit ...
Currently, I am experimenting with radio buttons to modify the background color of my div tag. My goal is to incorporate more than one condition. For example, if button A and button B are both clicked, then change the color to green. This is what I have im ...
Can someone assist me with this issue? I currently have 2 radio buttons and it is mandatory to select one of them. If the user chooses the first option and submits the form, the information gets sent successfully as intended. However, if the user select ...
Encountered a problem with the radio buttons in Material UI. Currently, Material UI accepts value as a prop for the FormControlLabel component. When passing a string with an HTML entity like below, it gets parsed correctly. <FormControlLabel value="fem ...
Looking to replace the bullet icon with CheckCircleSharpIcon from '@mui/icons-material/CheckCircleSharp' {res?.map((radiooption, index) => ( <> <RadioGroup aria-labelledby="demo-radio-buttons-group-label" name="radio-bu ...
Feeling overwhelmed. I am currently working on implementing a credit card auto system using the Stripe Payment plugin, but I find myself at a loss. Specifically, when a MasterCard is entered in the card number input field, it should receive the "masterca ...
Within my code, there is an ng-repeat including several radio buttons: <div class="panel panel-default" ng-repeat="item in vm.itemList"> ... <td ng-show="item.edit"> <div class="row"> ...
Here is my setup with a mat-radio-group and a button: <form action=""> <mat-radio-group aria-label="Select an option"> <mat-radio-button value="1">Option 1</mat-radio-button> <mat-radio-b ...
I'm currently in the process of replacing my radio circles with div elements. I've successfully implemented the functionality for selecting options by clicking on the divs, as well as highlighting the selected div. However, I'm facing trou ...
I'm attempting to nest a RadioGroup inside AccordionDetails, and then add the Accordion list as options within an Autocomplete component in its renderOption props. The issue I'm encountering is that when clicking on the label (which is a span element upon ...
I am working on creating a form with simple yes/no questions. If the answer is no, no explanation is needed. However, if the answer is yes, I want to insert a new table row and display a textarea for an explanation. To ensure data validation, I am utilizi ...
In my form page, users can input an ID to fetch profile data from a MySQL database using AJAX. The retrieved data is then displayed in the form for editing. One part of the form consists of radio buttons to select a year level (e.g., "1", "2", "3", etc). ...
I am struggling with a form that has 5 radio buttons, including an "other" option where users can manually enter text. The issue I'm facing is that the form only returns the manual entry text and not any of the preset radio values. I need it to work f ...
I have a unique situation where I have two distinct sections that contain sets of radio buttons with different values and IDs. However, I am facing an issue as I can only select one button at a time for both sets. My requirement is to have these two sets ...
I am having an issue with setting a radio button as checked. In the example snippet, it works perfectly fine but on my localhost, it is not working. Even though the input gets checked, the label does not change. Surprisingly, if I set another radio button ...
I'm attempting to pass a variable in the URL in order to automatically check a radio button on a different page depending on which link is clicked. However, I keep encountering an "Uncaught ReferenceError: radio_onload is not defined" error. Could this be ...
Is there a way to automatically check radio buttons when appending in IE7? Despite my code working in all browsers, it seems to fail in IE6 and IE7. I can't figure out why it's not working, even though I've followed the correct steps accord ...
I'm interested in finding a way to save the user's selected answer for a radio button question and track the time they saved it. Is there a way to achieve this using HTML alone? Or would I need to utilize another coding language or package? Just to provi ...
I have developed a unique React application that incorporates JSON values into checkbox elements. The JSON data includes both minimum and maximum required values. I successfully implemented a function to set the checkboxes' maximum value based on the JSON, ...
I'm new to jQuery and I'm finding it challenging. Currently, I have a set of three radio buttons with the third button already prechecked. My aim is to change the CSS class of the checked button, making it similar to an unchecked button with the class "btn ...
I recently came across a solution on how to enable a disabled dropdown list when clicked at . I attempted to implement this and added a grey background to the disabled selection. However, I encountered an issue where the background of the dropdown list re ...
I need to have a message saying "We're sorry..." and a "black box" displayed only when the radio button is set to YES, otherwise keep it hidden. Can I achieve this using JavaScript only, or is there a way to do it with HTML alone? <h3 >Did you encou ...
How can I troubleshoot an issue where the ajax function only works once when clicking on a radio button to change its value from 0 to 1, but not back to 0? The form contains a table with radio buttons for each record, and clicking on them triggers the aj ...
Hey there, I'm trying to check whether the radio button in (photo_edit.php) is set to 0 or 1, but it seems like all fields are empty. <td> <p> <input type="radio" name="visible" id="visible" value="1" /><?php echo (@$ ...
I am currently facing an issue with the three radio buttons. They all allow multiple selections at once. How can I prevent this behavior and make it so that when one button is pressed, the selection switches from the previously selected one? pen_size ...
Within the parent component, I have developed a form that is intended to function with 3 sets of radio buttons. My approach involved using NG_VALUE_ACCESSOR for communication between the parent and child components. While the data transfer from parent to c ...
I'm having trouble creating a custom radio button that displays the image I want. The current setup doesn't seem to be working as expected. label { font-weight: lighter; cursor:pointer; } input[type="radio"] { display:none; } input[type=" ...
Is there a way to set conditions for radio buttons in Vue.js? I am trying to make the radio buttons dependent on a specific object that I select from the above codes. The "select" method works well and setting a value based on an object I choose using :val ...
I am facing an issue with a loop that iterates 3 times. In the loop, there's an HTML form containing radio buttons and I am processing the input using PHP. However, when echoing the form data, it does not display the correct values. Is there something ...
I'm struggling with a function designed to toggle the state of a radio button. Here's what it looks like: public void changeRadioState(List<WebElement> radioButtons){ for(WebElement radioButton: radioButtons) { if (!radioButt ...
Tried the solutions recommended in a previous question about radio buttons not showing in Safari and Chrome, but unfortunately, it did not solve my problem. It seems like this issue is different from the one discussed in that question. The WordPress them ...
Below is the provided HTML: <form> <div class="form-group"> <div class="checkbox-detailed male_input"> <input type="radio" name="gender" id="male" value="male"> <label for="male"> ...
Recently, I've delved into the world of angularJS and decided to experiment with ng-model, ng-checked, and ng-if in relation to radio buttons <html> <head> <title>Testing Angular JS Radio Buttons</title> </head> < ...
I'm trying to retrieve the value of the selected radio button using jQuery. Can anyone help with this? Currently, I am able to target all radio buttons like so: $("form :radio") But how can I determine which one is actually selected? ...
Having an issue with checkboxes on a webform. The user must choose options for a purchase by selecting checkboxes and radio buttons. There are 2 radio buttons, numbered 1 and 2, representing the quantity of the product to be purchased. Following those are ...
It seems like a simple task, but I am looking for a solution without using jQuery. I have the Id of a specific radio button control that I need to set. I tried the following code: let radiobutton = document.getElementById("Standard"); radiobutton.checke ...
I found a useful package for radio buttons called react-native-flexi-radio-button. Currently, I'm working on displaying API results within radio buttons. The API response provides 4 options, and my goal is to render text alongside the corresponding ra ...
Utilizing a v-for loop over an array of objects in graphicState, the rows of a table are dynamically generated. My goal is to implement a column of radio buttons that, when checked, will set graphicState[index].selected to true. I came across this insight ...
I am seeking a way to customize the appearance of checked and unchecked checkboxes using images without modifying the HTML structure. I would prefer not to add labels, classes, or IDs to the elements. The provided example only works in Webkit browsers, s ...
I'm working on a form that looks like this: <form> <input type="text" id="searchedWord" class="form-control form-control-lg" value="words here"/> <button type="submit" id="f ...
After exploring past inquiries, I have yet to find a solution - as a total beginner in this field, please excuse my lack of knowledge... My goal is to choose the third 'Radio' button on the webpage using the script below: from selenium import webdriver fr ...
Currently, I have a unique setup where a table is generated dynamically based on the user's selection from a dropdown. Within this table are three checkboxes per row, with a limit of 2 checkboxes that can be checked per row. The behavior of Checkbox ...
As I was following a tutorial on creating an employee CRUD model using spring boot and mysql server for the backend and angular for the frontend, I encountered a form group during the creation process. The tutorial originally had a text input field for gen ...
What is the best way to automatically check a radio button on page load using jQuery? Checking if there is no default option selected and then setting one as the default ...
Despite coding it this way, the multiple radio form is still not functioning as intended. I attempted to utilize fieldset, but to no avail. How can I rectify this issue? Could using various ID's for fieldset assist in creating multiple forms correctly ...
I am encountering an issue with my form. I require it to redirect the user to different pages based on the selection of a radio button. The user must choose one of two options and click "next," and depending on their choice, they should be redirected to an ...
Help needed to align MaterializeCSS's radio buttons inline without gaps. Thank you in advance for any assistance! Below is a snippet of the code: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize ...
Struggling with my first attempt at incorporating jQuery into my project. I have set up 2 radio buttons on a form, and I want the selected option to update the value of an input text box within the same form. However, despite my best efforts, I just can't ...
How do you connect the value of a selected radio button to a specific variable in the data object within a Vue application when using the render/createElement function? ...
Currently, I am working with Material UI's Radio button component. I am looking to customize the focusVisible property specifically for when users navigate using keyboard only, and apply unique styles to the checkbox element. While I can define styles fo ...
I have a software program that calculates the shortest distance between two points. I am attempting to use radio buttons to either add or subtract distance from the result. The error message I receive indicates that 6 arguments are required, but only 5 a ...
I have a pure CSS accordion and I want to enhance it with some JavaScript functionality for users who have JavaScript enabled. The CSS accordion currently utilizes the :checked pseudo-class. The new feature I am looking to add is: if a button that is alre ...
Currently, I am utilizing version 4 of Material UI in my project. One issue that I am facing is with a custom dialog box which is widely used throughout the project. Access the codeSandBox here Within the dialog box, there is a form containing text field ...
When it comes to the default CSS code for radio buttons, they appear gray when unselected and blue when selected: https://i.stack.imgur.com/hsazr.png However, I have a specific requirement for them to be black in both states. In order to achieve this, I ...
I've experimented with various methods, including traditional form reset techniques and jQuery solutions from different sources on the internet without success. Snapshot: The Objective: I am working on a sortable list where users are required to ra ...
Kindly review the provided example: // var ngApp = angular.module('app', []); ngApp.controller('ctrl',function($scope){ $scope.selectBus = function ($data, $pData) { angular.forEach($data, function (cu) { cu.IsSelecte ...
Is it possible to create a radio button within a button using mui, where the user can click on either the radio button or the button to check it? The user should only be able to choose one option - either female or male. Instead of using multiple use stat ...
Currently, I am in the process of developing a React application that includes a complex search feature. Essentially, what I need to achieve is the ability to dynamically display Radio buttons based on the input of other Radio buttons. For this functionali ...
Initially, I am utilizing the email script created by Jeffrey Way on In the Woods. Here is a basic form structure: <form method="post" action="sendEmail.php" id="form_reserveren"> <div id="container"> <div id="main" style="width: 100% ...
I'm just starting out with JS and could really use some guidance on how to improve my code. I think it might need a single function for all options, but I'm not sure. It's working fine right now, but I have a feeling it could be better ;) Here is what I w ...
Below is the HTML code for two radio buttons and a button: <body> <input data-image="small" type="radio" id="small" name="size" value="20" class="radios1"> <label for=&qu ...
On a page, I have a pre-existing RadioButtonList where I want to make the second button checked by default instead of the first one. Since I am unable to edit the original control directly, it seems like I might need to achieve this using javascript on th ...
While examining the code of the button, I landed on this specific section: <input type="radio" name="chosen" value="UniqueNameExample"> I am attempting to locate an element within this code that I can interact with by c ...
I am relatively new to JavaScript and I am working on setting up an automator to handle some repetitive tasks on a work website. Today, I have spent several hours trying to use JS to select the second radio button out of two. I thought the following code s ...
I have been working on some code in Angular JS and need to disable a radio button based on the previous selection or changes in a text box In the JS controller: PPCO.cusGender = [ { id : '1', key : 'Male', value : 'Male', dis ...
Within a jhipster project, I have an Enumeration field containing values "A, B, C, D, E". The conventional approach in Jhipster utilizes a Select/Options setup: <div class="form-group"> <label class="form-control-label" jhiT ...