將單選按鈕列表更改爲標籤

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);