CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
Stefan Momcilovic
Stefan Momcilovic

Reputation: 624

All radio buttons are selected?

i have a problem with my jQuery code and my radio buttons, if i selected one button and another he stay checked i don't know how to fix that if someone can help me to slove my problem thank you. I leave my code and screenshoot to see what actualy happend.

enter image description here 

$("#custom").click(function() {
  $(".custom").css({
    "display": "block"
  })
})

$("#man").click(function() {
  $(".custom").css({
    "display": "none"
  })
})

$("#ladies").click(function() {
  $(".custom").css({
    "display": "none"
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="ladies" name="ladies" value="ladies">
<label for="ladies">Ladies</label>

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

<input type="radio" id="custom" name="custom" value="custom">
<label for="custom">Custom</label>
<a href="#" class="icons"><i class="fas fa-question-circle fa-1x"></i></a>

<div class="custom">

  <form action="#">
    <select name='gender' id='gender'>
      <option value='gender' disabled>Select the pronoun you are using</option>
      <option value='she'>She: "Wihs her a happy brithday"</option>
      <option value='he'>He: "Wish him a happy birthday!"</option>
      <option value='he/she'>He / She: "Wish him / her a happy birthday!"</option>
    </select>
    <p class="genderTxt">The chosen pronoun is visible to everyone.</p>
    <input type="text" class="optionalG" placeholder="Gender (optional)">
  </form>
</div>

I do not have any error message to show up.

Upvotes: 0

Views: 1914

Answers (2)

Tibike
Tibike

Reputation: 358

All <input type="radio"> tags need the same name attribute. Then it will work.

<input type="radio" id="ladies" name="gender" value="ladies" checked>
<label for="ladies">Ladies</label>

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

<input type="radio" id="custom" name="gender" value="custom">
<label for="custom">Custom</label>

Upvotes: 2

Max Jacobson
Max Jacobson

Reputation: 332

The name attribute on the group of radio buttons need to have the same name.

Change this:

 <input type="radio" id="ladies" name="ladies" value="ladies">
 <label for="ladies">Ladies</label>

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

 <input type="radio" id="custom" name="custom" value="custom">
 <label for="custom">Custom</label>

To this

 <input type="radio" id="ladies" name="radioGroup" value="ladies">
 <label for="ladies">Ladies</label>

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

 <input type="radio" id="custom" name="radioGroup" value="custom">
 <label for="custom">Custom</label>

The name doesn't need to be "radioGroup", but it needs to be the same so the code can tell which groups of radio buttons belong together.

Upvotes: 3

Related Questions