All radio buttons are selected?

Question

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.

 $("#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.

Answer 1

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>

Answer 2

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.