如何让单选按钮在表单上被选中？

Question

我的单选按钮在单击时没有被选中，并且在浏览器的检查元素上没有发现错误。可能是什么问题呢？因为我使用了正确的名称并将它们绑定到 jquery 函数调用上。

`// 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>`

Answer 1

我认为你的代码工作正常，当我添加一个按钮

$(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>

Answer 2

您的代码的问题是您为两个单选按钮使用了相同的性别 id 属性值。 id 属性对于 HTML 文档中的每个元素都应该是唯一的。这种情况下，需要给每个radio button一个唯一的id属性值，然后更新label元素中的for属性值来匹配radio button对应的id值。

这里是更正后的 HTML 代码：

<!--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>

请注意，我已分别为两个单选按钮的 id 属性指定了唯一值 male 和 female。我还更新了 label 元素中的 for 属性值以匹配单选按钮的相应 id 值。

现在当你点击一个单选按钮时，它应该被选中并且值应该被你的 jQuery 代码捕获。