Question

我已经构建了一个表单，允许用户在点击按钮后编辑之前输入的信息。

在这种情况下，用户将点击性别标签旁边的编辑按钮，并显示一个单选按钮，以便他们选择男性或女性。

我需要帮助找出一种方法，让单选按钮列表在点击时更改回标签。

这是我到目前为止所拥有的：

HTML

<div class="gear">
  <label>Gender:</label><br />
  <span id="gender" class="datainfoGender">Male</span>
   <a href="#" class="editlinkGender">Edit Info</a>
   <a class="savebtnGender">Save</a>
</div>

的Javascript

$(".editlinkGender").on("click", function (e) {
    e.preventDefault();
    var datasets = $(this).prevAll(".datainfoGender");
    var savebtn = $(this).next(".savebtnGender");
    datasets.each(function () {
        var theid = $(this).attr("id");
        var newid = theid + "-form";
        var currval = $(this).text();
        $(this).html('<input type="radio" name="gender" value="male">Male<br><input type="radio" name="gender" value="female">Female');
    });

    $(this).css("display", "none");
    savebtn.css("display", "block");
});

$(".savebtnGender").on("click", function (e) {
    e.preventDefault();
    var elink = $(this).prev(".editlinkGender");
    var datasets = $(this).prevAll(".datainfoGender");
    datasets.each(function () {
        var newid = $(this).attr("id");
        var einput = $("#" + newid + "-form");
        var newval = einput.val();
        einput.remove();
        $(this).html(newval);
    });

    $(this).css("display", "none");
    elink.css("display", "block");
});

如何从单选按钮列表中获取值并将其变为标签？

Answer 1

检索这样的值：

var newGender = $('[name="gender"]').val();

并将其更改为标签：

$('[name="gender"]').html('your choice : ' + newGender);

将单选按钮列表更改为标签

1 个答案: