Question 11027 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to make radio buttons to be selected on the form? – Jquery

My radio buttons are not selecting when they are clicked and there no errors found on the inspect element from the browser. What could be the problem? because i used the correct name and bind them on the jquery function call.

`// Javascript
   /**
    *@author:Gcobani Mkontwana
    @date:02/03/2023
    @select radio buttons during form application for loan.
    */ 
   $(document).ready(function(){
        $("input[type='button']").click(function(){
            var radioValue = $("input[name='gender']:checked").val();
            if(radioValue){
                alert("Your are a - " + radioValue);
            }
        });
    });

// HTML code
     <!--Radio Select -->
                                           <div class="select-radio6">
                                                <div class="radio">
                                                    <input id="gender" name="gender" type="radio" value="male">
                                                    <label for="radio-6" class="radio-label">Male</label>
                                                </div>
                                                <div class="radio">
                                                    <input id="gender" name="gender" type="radio" value="female">
                                                    <label for="radio-6" class="radio-label">Female</label>
                                                </div>
                                            </div>`
Tags:

2

Answers


  1. 0

    The issue with your code is that you have used the same id attribute value of gender for both radio buttons. The id attribute should be unique for each element in the HTML document. In this case, you need to give each radio button a unique id attribute value, and then update the for attribute value in the label element to match the corresponding id value of the radio button.

    Here’s the corrected HTML code:

    <!--Radio Select -->
<div class="select-radio6">
    <div class="radio">
        <input id="male" name="gender" type="radio" value="male">
        <label for="male" class="radio-label">Male</label>
    </div>
    <div class="radio">
        <input id="female" name="gender" type="radio" value="female">
        <label for="female" class="radio-label">Female</label>
    </div>
</div>

    Notice that I’ve given the id attribute a unique value of male and female for the two radio buttons, respectively. I’ve also updated the for attribute value in the label element to match the corresponding id value of the radio button.

    Now when you click on a radio button, it should get selected and the value should be captured by your jQuery code.

    Login or Signup to reply.
  2. 0

    I think your code is working fine, when i added a buttton

    $(document).ready(function(){
        $("input[type='button']").click(function(){
            var radioValue = $("input[name='gender']:checked").val();
            if(radioValue){
                alert("Your are a - " + radioValue);
            }
        });
    });
    
    
     
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select-radio6">
     <div class="radio">
    <input id="gender" name="gender" type="radio" value="male">
 <label for="radio-6" class="radio-label">Male</label> </div>
        <div class="radio">
   <input id="gender" name="gender" type="radio" value="female">
 <label for="radio-6" class="radio-label">Female</label>
                </div>
                <input type='button' name = 'submit' value = 'submit'/>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search