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

Utilizing the HTML5 Download attribute for linking to external files

I am currently developing a web application for my own personal needs. One feature I would like to implement is the ability to set the download attribute on certain links. However, I have run into an issue where the files to be downloaded are hosted on ex ...

javascripthtmlcross-domaingreasemonkey

Iterate through and conduct conditional verification

In my project using AngularJS and HTML, I have created a table to display records. I am looking for a way to iterate through the column values and strike through any value in the column that meets a certain condition. For example, in the demo provided her ...

javascripthtmlangularjs

I'm having trouble getting my HTML page to display appended text. What could be causing the issue?

let mainDiv = document.getElementById("main"); let myParagraph = document.createElement("p"); let myTextNode = document.createTextNode("hello"); myParagraph.append(myTextNode); mainDiv.append(myParagraph); let max = 25; let on ...

javascripthtml

"Optimizing the Placement of jPlayer for Your Website

Struggling to properly position jPlayer on my webpage. After consulting jPlayer's documentation, I learned that it is supposed to be absolutely positioned by default. However, it seems to be flowing with the rest of the page content rather than being ...

javascriptjqueryhtmljplayer

What is the functionality of the keydown event?

Whenever the input text value is not empty, I want my .removetext div to be displayed, but it's not working correctly. When I type something after the second character, my .removetext gets hidden, but it shouldn't be hidden when the input is not ...

javascriptjqueryhtmlcss

What is the best way to target an HTML element that is only connected to a particular class?

My HTML code includes the following 3 elements: <span class="a b"></span> <span class="a"></span> <span class="a b"></span> I am trying to select the element that only has the class "a". When I use $("span.a"), it sele ...

jquerycssclass

Tips on Creating a Display None Row with a Sliding Down Animation Using Javascript

I am working with a table that has some hidden rows which only appear when the "show" button is clicked. I want to know how I can make these hidden rows slide down with an effect. Here's the snippet of my code: function toggleRow(e){ ...

javascriptjqueryhtmlcss

Modifying alignment of buttons in React components

Transforming the typical Tic Tac Toe game from the React tutorial, with an added one-player feature. Oddly, button alignment shifts out of place once a value is inserted; causing the button to drop by about 50px until the row is filled with values, after ...

javascriptcssreactjs

Thick black border on select list in Internet Explorer version 10

After recently switching to IE10, I couldn't help but notice that all my dropdown lists (select lists) now have a bold black border when in the "dropped down" state, like the example below. Unfortunately, I am unable to inspect the element using IE&ap ...

cssinternet-explorer-10selectlist

Having trouble with links, imported templates, and selections not functioning properly post file reorganization?

After setting up my jQuery to import universal template files into various parts of my website, everything was running smoothly. However, once I restructured my filing system, things took a turn for the worse. Now, not only is my SELECT dropdown malfunctio ...

htmljquerydrop-down-menupathhyperlink

JavaScript can dynamically attach EventListeners to elements, allowing for versatile and customized event

I am currently populating a table using data from an XML file. One of the columns in the table contains links to more details. Due to the unique requirements of my web page setup (Chrome extension), I need to dynamically add an event handler when the table ...

javascripthtmldom-eventsaddeventlistenerevent-listener

Touch interaction operates differently than mouse movement

Imagine three neighboring divs, div1, div2, and div3. When I click on div1 and then move my mouse to div2, the mousemove event is triggered with div2 as the target. However, on mobile devices, if I tap on div1 (touchstart) and slide my finger to div2, the ...

javascripthtml

Adding HTML saved as a blob directly to the source of a .aspx page

I am faced with the task of creating a page that allows users to edit content, which will then be converted to HTML and stored in an MS SQL 2008 R2 database. The challenge is to display this information on an announcements page using the data from the data ...

c#asp.nethtmlreal-time

Updating Text within a Label with jQuery

Seeking assistance with a jQuery issue that I am struggling to resolve due to my limited experience. Despite attempting to search for solutions online, I have been unable to find an alternative function or determine if I am implementing the current one inc ...

javascripthtmljquerycssfunction

Employ a distinct styling approach for Chrome and Mozilla with only utilizing a single style

This is the CSS style defined in a PHP file for an Element line-height: 120px; display: list-item; display: -moz-inline; list-style: none; If the browser is Chrome, I want it to show display: list-item, and if it's Mozilla, then display: inline. Th ...

htmlcss

Working with HTML5 Canvas to Clip Images

Is there a way to implement a tileset image in canvas like this one? I am trying to figure out how to make it so that clicking on the first tile returns 0, clicking on the tenth tile returns 9, and so on... Any suggestions on how to clip a tileset on an ...

javascripthtmlcanvas

Reposition all other elements of the HTML body after collapsing the Bootstrap section

I am facing an issue with Bootstrap where every time I click on a collapse element, the rest of the body moves up or down. Is there a way to prevent this from happening? Here is an example of my code: <body> <div class="panel-group"> ...

htmltwitter-bootstrap

Are HTML attribute names really case-sensitive? A topic filled with conflicting information

After learning that attribute names are case-sensitive, I found conflicting information. A source mentioned that attribute names are indeed case-sensitive. For example, the width attributes in <div> and <DIV> would be considered separate due ...

htmlcss

Having issues with email verification and the length of phone numbers not functioning properly

I need to validate two text fields before registration: the email must be in correct format and the number must have exactly 11 digits. Any mismatches should trigger an error message. For the email validation, I used a function that checks for the require ...

javascripthtml

The Art of Div Switching: Unveiling the Strategies

I have a question regarding my website. I have been working on it for some time now, but I have encountered a challenge that I am struggling to overcome. After much consideration, I am unsure of the best approach to take. The issue at hand is that I have ...

javascriptcsshtmldom