The ease of use and availability of radio buttons

When clicking on the first or second value of the radio button, it selects the first option. Here is the HTML code:

  @supports(-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='radio'],
  input[type='checkbox'] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  input[type="radio"] {
    top: 0;
    left: 0;
    height: 1.5vw;
    width: 1.5vw;
    background-color: #ffff;
    border-radius: 50%;
    cursor: pointer;
  }
<div class="radio-group">
  <fieldset>
    <legend>Gender</legend>
    <label for="gender" id="gender-label">
        Male
        </label>
    <input type="radio" name="gender" id="gender" value="male">

    <label for="gender" id="gender-label">
        Female
        </label>
    <input type="radio" name="gender" id="gender" value="female">
  </fieldset>
</div>

Is there a way to make it so that when a user clicks on "Female," the female radio button becomes checked? Any assistance would be greatly appreciated! Thank you

htmlcss

Answer №1

<div class="radio-group">
  <fieldset>
    <legend>Gender</legend>
    
    <label for="male-for"
           class="gender-label">
      Male
    </label>

    <input type="radio"
           name="gender"
           id="male-for"
           value="male">

    <label for="female-for"
           class="gender-label">
      Female
    </label>

    <input type="radio"
           name="gender"
           id="female-for"
           value="female">
  
  </fieldset>
</div>

Your code should be structured like this. It seems that your IDs are not unique, which is why it may not be functioning properly. If you have styles applied and need to target elements using classes instead of IDs, consider changing id="gender-label" to class="gender-label", as having the same ID for multiple elements is not valid.

Answer №2

If you want this code to function correctly, make sure to update your IDs as shown below:

<label for="man" id="man-label">
        Man
</label>
<input type="radio" name="gender" id="man" value="man">

<label for="woman" id="woman-label">
    Woman
</label>
<input type="radio" name="gender" id="woman" value="woman">

Answer №3

It is important that the ids are unique, here is an example of how it should function:

  @supports(-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='radio'],
  input[type='checkbox'] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  input[type="radio"] {
    top: 0;
    left: 0;
    height: 1.5vw;
    width: 1.5vw;
    background-color: #ffff;
    border-radius: 50%;
    cursor: pointer;
  }
<div class="radio-group">
  <fieldset>
    <legend>Gender</legend>
    <label for="genderMale" class="gender-label">
        Male
        </label>
    <input type="radio" name="gender" id="genderMale" value="male">

    <label for="genderFemale" class="gender-label">
        Female
        </label>
    <input type="radio" name="gender" id="genderFemale" value="female">
  </fieldset>
</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

What's the issue with my ExpressJS req.query not functioning as expected?

My NodeJS repl setup includes an input, button, and h1 element. The goal is to update the HTML inside the h1 element with the value of the input upon button click. Here's a glimpse of my code: index.js: const Database = require("@replit/database ...

javascripthtmlnode.jsajaxexpress

Can someone help me troubleshoot this issue with my code so that my website can open in a blank page using about:blank?

I'm currently facing an issue while trying to make one of the pages on my website open with an about:blank URL upon loading. Despite embedding the code in my index.html file, it doesn't seem to be functioning properly. Here's the code I&apos ...

javascripthtml

Display a div with a link button when hovering over an image

Currently, I'm attempting to display a link button within a div that will redirect the user to a specified link upon clicking. Unfortunately, my current implementation is not functioning as expected. I have provided the code below for reference - plea ...

c#javascriptjqueryhtmlcss

JQuery isn't functioning properly on dynamically generated divs from JavaScript

I'm currently tackling an assignment as part of my learning journey with The Odin Project. You can check it out here: Despite creating the divs using JavaScript or jQuery as specified in the project requirements, I am unable to get jQuery's .hov ...

javascriptjqueryhtmlcss

Fascinating CSS quandary: does the transparency of a parent element impact the transparency of a child element that is absolutely positioned, but not in relation

Check out this test case: https://jsbin.com/merujogudo/1/edit?html,css,output Should the element with .test class be transparent or not? Note: The current state is as follows: In Chrome and Firefox (latest versions): transparent In IE11: opaque It wou ...

cssstandards

What is the best way to use appendChild within an AJAX get function to manipulate the DOM

I've been working on a code function where I try to append a list item (li) into the HTML received in 'msg', but it's not functioning properly. Any ideas why? function handleFileSelect(evt) { var files = evt.target.files; $(&ap ...

javascriptjqueryajaxhtml

Performance issues with jquery addClass and removeClass functions observed in Internet Explorer 11

I am currently working on an application that monitors nodes within a cluster, and I have created a visual state example to demonstrate this. Each small box in the grid represents a node, and when hovering over a node, the rest of the nodes in that particu ...

javascriptjquerycssfrontend

Ensure the left and right screen widgets remain fixed in their positions as the user scrolls down the page using the spacebar

Currently, I have a webpage that showcases products with a large height attribute. I am looking for a way to make the page scroll down when the user hits the space bar to view more products. However, I want my screen widgets such as the shopping cart and ...

javascriptcsspositioning

An absolutely positioned element will always move within its relative container

After extensive searching on Google and Stack Overflow, I finally found what seemed like the perfect solution. The logic behind it made sense and I understood it perfectly. But when I implemented it, my absolute positioned divs kept moving whenever I resiz ...

csshtml

Implementing AngularJS to display different divs according to the selected value

I am attempting to utilize the value of an HTML select element to toggle the visibility of specific div tags using AngularJS. Below is the code snippet I have been working with: <body ng-app="kiosk" id="ng-app" > <div class="page" ng-controll ...

javascripthtmlangularjshtml-selectng-show

What steps can be taken to update the ID's of <tr> and <td> elements within a table after deleting a row?

I am working on a dynamic table with 5 rows, each row containing 3 columns - partNO, quantity, and a delete button. Each row is assigned a unique ID for identification purposes. If a user deletes the second row, I want the IDs of the remaining rows to be ...

jqueryhtml

Detect when a user's mouse is hovering over an iframe and escape the iframe accordingly

When the iframe window is visible, there are no issues. However, if the iframe window is set to 0px X 0px in order to hide it while still loading, consider redirecting the iframe or not displaying it at all. In case something is loaded within an iframe or ...

javascriptcssiframe

Show both sets of data in two tables on one page

Currently, I have two tables named users and vm_tables. I am currently displaying data from the users table in the following manner: $sel_query = "SELECT * FROM users WHERE account_id=".$_SESSION['admin_id']; <td align="left"><?php ech ...

phphtmlmysql

Setting the dimensions of an HTML - CSS block

I am trying to style a navigation bar using the following CSS code: #nav {} #nav a { position: relative; display: inline-block; color: #F0F0F0; width: 1em; height: 2em; line-height: 0.9em; } #nav a.ic ...

javascripthtmlcss

Why is Python BeautifulSoup's findAll function not returning all the elements in the web page

I am attempting to retrieve information from the following URL . Displayed below is the code I have developed. import requests from bs4 import BeautifulSoup url_str = 'https://99airdrops.com/page/1/' page = requests.get(url_str, headers={&apo ...

pythonhtmlbeautifulsoup

Exploring user inputs and displaying variables using JavaScript and HTML 4.01

I was testing some code and I'm facing an issue that I can't figure out: <HTML> <head> <title> Page 1 </title> <script> function myFunction() { var x=document.getElementById("myEmail") document.write(x) } </scr ...

javascripthtmlhtml4

"Typescript throws a mysterious 'Undefined value' error post-assignment

I'm currently working on a task to fetch my customer's branding information based on their Id using Angular. First, I retrieve all the customer data: this.subscription = this.burstService.getBurst().subscribe(async(response) => { if (r ...

javascripthtmlangularjstypescript

Generate a text input field within a dropdown menu

Below is an example of my basic HTML code for a drop-down list: <span id="Div_List"> <label for="Gender">For:</label> <select name="Gender" id="Sex"> <option value="1">1000mtr</option> <option val ...

javascriptjqueryhtml

Angular Universal causes SASS imports to malfunction

Check out this sample app that you can download to see the issue in action: https://github.com/chrillewoodz/ng-boilerplate/tree/universal I am currently working on implementing angular universal, but I'm encountering an error with a SCSS import in o ...

cssangularsassangular-universal

Align the text to the center beneath the image using Jquery's append function

I am looking to showcase a collection of fruits and vegetables through images, with the names displayed centered underneath each image. Additionally, I want to implement jQuery append functionality so that the names only appear when a specific button is cl ...

htmljquerycss