Question

我坚持这个！当我提醒对象时，我将字符串化，性别的值始终保持不变！如何改变它的工作？

我有这段代码：

<!DOCTYPE HTML>
<html>
    <head>
    <title>Practical 2 - exercise</title>
    <script type="text/javascript">
        function myJSONobj(){

        var JSONObject={
            "name" : document.getElementById("name").value,
            "surname" : document.getElementById("surname").value,
            "email" : document.getElementById("eMail").value,
            "gender" : document.getElementById("gender").value
        };

        var jsonstr=JSON.stringify(JSONObject);
        alert(jsonstr);

        var jobjson=JSON.parse(jsonstr);
        alert(jobjson.gender);
        }
    </script>
    </head>
    <body>
    <form method="post" action="display.php">
            <p>
            Your name:
            </br>
            <input type="text" id="name" name="theName" placeholder="Fill in your name" autofocus="autofocus" required="required"/>
            </p>
            <p>
            Your surname:
            </br>
            <input type="text" id="surname" name="theSurname" placeholder="Fill in your surname" required="required"/>
            </p>
            <p>
            Your email:
            </br>
            <input type="email" id="eMail" name="theMail" placeholder="mail@mail.com" required="required"/>
            </p>
            <p> Please select your gender:
            <br/>
            <input type="radio" id="gender" name="gender" value="M" /> M
            <input type="radio" id="gender" name="gender" value="F" required="required" /> F
            </p>
            <input onClick="myJSONobj();" type="button" id="theSubmit" name="theSubmit" value="Fire away!!"/>
    </form>
    </body>
</html>

一定要测试它，看看它做了什么！

谢谢！

Answer 1

元素id必须在页面中是唯一的，因此第一个错误是对2个不同的无线电使用相同的id。使用唯一ID：

<input type="radio" id="gender-M" name="gender" value="M" /> M
<input type="radio" id="gender-F" name="gender" value="F" required="required" /> F

然后要将所选性别检索到myJSONobj函数中，必须使用类似：

的内容

var JSONObject={
        "name" : document.getElementById("name").value,
        "surname" : document.getElementById("surname").value,
        "email" : document.getElementById("eMail").value,
        "gender" : document.getElementById("gender-M").checked ? 'M' : 'F'
    };

或（更通用一点）：

var radios = document.getElementsByName('gender');
var gender = '';
for(var i=0;i<radios.length;i++)
{
   if(radios[i].checked)
      gender = radios[i].value;
}

var JSONObject={
        "name" : document.getElementById("name").value,
        "surname" : document.getElementById("surname").value,
        "email" : document.getElementById("eMail").value,
        "gender" : gender
    };

Answer 2

2个radiobuttons的标识符相同：gender。你应该重命名其中一个。

Answer 3

您不能拥有两个具有相同ID的HTML元素。如果是这种情况，那么当您尝试通过document.getElementById访问它们时，大多数浏览器都会返回源中的第一个元素。这是一个解决方法（仅显示更改）。

修订HTML：

<input type="radio" id="gender_M" name="gender" value="M" /> M
<input type="radio" id="gender_F" name="gender" value="F" required="required" /> F

修订JavaScript：

"gender":
    document.getElementById("gender_M").checked
        ? document.getElementById("gender_M").value
        : (
            document.getElementById("gender_F").checked
                ? document.getElementById("gender_F").value
                : undefined
        )

请注意，从单选按钮，复选框，选择和多选元素中获取值并不像执行.value那样简单。通常，您需要遍历元素以查找已选中/已选择的元素。例如，如果您有两个以上的单选按钮，最好使用循环结构（并将其包装在函数中），如下所示：

function getValueOfRadios(radios) {
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
            return radios[i].value;
        }
    }
}
// ... other code ...
"gender" : getValueOfRadios(document.forms[0]["gender"])

无法使用JSON获取性别单选按钮值

3 个答案: