性别复选框的功能不正常。

11 浏览
0 Comments

性别复选框的功能不正常。

性别复选框数据在本地存储中存储不正确，除了“男性”复选框外，只有“男性”复选框有效，而“女性”和“其他”复选框无效。

表单页面用于使用JavaScript将输入保存到本地存储。

form.html



    
        表单
        
    
    
        
表单

        

            姓名： 
            性别： 男性 
            女性 
            其他 
            手机号码： 
            电子邮件：

显示页面用于访问本地存储并显示其中的内容。

display.html



    
        显示
        
    
    
        姓名： 
        性别： 
        手机号码： 
        电子邮件：

0

2 答案

0 Comments

Gender checkbox is not functioning properly

问题原因：如果使用单选按钮类型，所有的单选按钮应该有相同的名称。并且你拼写了"female"错误。

解决方法：确保所有的单选按钮具有相同的名称，并且正确拼写"female"。

0
0 Comments

问题出现的原因是radio input的name属性不一致，导致无法正常工作。解决方法是确保所有radio input的name属性相同，并且value属性的值应该是该input的值。例如：

男性 
女性 
其他

现在，你可以使用下面的代码来获取选中的值：

document.querySelector('input[name="gender"]:checked').value; //根据选中的值返回MALE|FEMALE|OTHERS

你也可以在任意一个或多个radio按钮中添加required属性，以确保用户必须选择一个选项。另外，你还可以使用checked属性预先选择一个复选框，以确保性别始终有值。

关于为什么所有radio input需要相同的name属性并具有不同的值，可以参考以下内容：

> 单选按钮组必须共享相同的name属性（name属性的值）才能被视为一组。一旦创建了单选按钮组，选择该组中的任何单选按钮将自动取消选择该组中的其他单选按钮。你可以在页面上拥有任意多个单选按钮组，只要每个组都有自己的name属性。

> value属性定义了每个单选按钮关联的唯一值。这个值不会显示给用户，但在“提交”时发送到服务器，用于标识哪个单选按钮被选中。

参考链接：[https://www.w3schools.com/tags/att_input_type_radio.asp](https://www.w3schools.com/tags/att_input_type_radio.asp)

0