RadioButtons的JQuery本地存储值缺少回发值

Question

我想知道是否有人可以帮助我解决我的问题，我有一些动态刷新的RadioButtons，但如果有人编辑这些我想保留值，如果内容再次刷新。到目前为止，我有一个有效的解决方案，直到我保存表单，其中RadioButton值丢失。

让我解释：

在我们的表单上，每次选中“角色标准”单选按钮时都会获取内容。

如果用户在内容中选择单选按钮和注释文本，则如果用户决定添加额外的角色标准，则这将丢失。请注意，此页面上有许多单选按钮和注释字段，它们会根据选择而更改。

为了纠正这个问题，我添加了一些jQuery来存储本地存储中的RadioButtons和Comments的值，然后在重绘上下文区域时重新填充值。有问题的单选按钮是使用Razor在Partitial View（MVC）中创建的，在页面上它们如下所示： - 注意值True和False。

        <td class="text-center">
                <label class="text-center" id="lblCourseApplicableYes">
                    <input name="CourseApplicable" id="CourseApplicableYes" type="radio" checked="checked" value="True">
                    <label for="Yes">Yes</label>
                </label>
                <label class="text-center” id="lblCourseApplicableNo">
                    <input name="CourseApplicable" id="CourseApplicableNo" type="radio" value="False">
                    <label for="No">No</label>
            </label>
        </td>

这是我用来存储和恢复用户选择的基本调用，并且按预期可视化工作：

在AJAX触发更新内容之前调用：

function StoreValues() {
     window.localStorage.clear();
     $("#UpdatePanel").each(function () {
         var textFields = $(this).find('input[type=text], textarea');
         var radioButtons = $(this).find('input:radio');
         if (typeof (window.localStorage) != "undefined") {
             textFields.val(function () {
                 localStorage.setItem(this.id, $(this).val());
             });
             radioButtons.val(function () {
                 if ($(this).prop("checked")) {

                     localStorage.setItem(this.id, true);
                 }
             });
         }
     });
 }

在AJAX调用之后调用重绘成功调用的内容：

function RestoreValues() {
     $("#UpdatePanel").each(function () {
         var textFields = $(this).find('input[type=text], textarea');
         var radioButtons = $(this).find('input:radio');
         if (typeof (window.localStorage) != "undefined") {
             textFields.val(function () {
                 if (localStorage.getItem(this.id) !== null) {
                     return localStorage.getItem(this.id);
                 }
             });
             radioButtons.val(function () {
                if (localStorage.getItem(this.id) !== null) {

                    $(this).click(function() {
                        $(this).prop("checked", true);                       
                    });

                    $(this).click();
                }
             });
         }
     });
 }

这很好用，用户也不是更聪明。但是保存的东西有点不同。一旦发生回发，单选按钮的值就会丢失。我需要使用这些，所以我可以使用Form.Request来获取值。

查看Fiddler，发送回服务器的参数是RadioButton名称，但值为空。

TextComments通过，所以我知道它与如何检查radiobutton有关。如果我保存一个没有JQuery重新填充任何内容的新表单，那么所有值都应该是它们，即radiobutton名称值为True或False。

但是在JQuery恢复项目之后，每个输入的值参数都是“”空白，我注意到检查的值也没有移动，但不确定这是否正常。我试图用更多的JQuery强制那里的价值，但没有任何运气，无论我尝试过什么。

我已经尝试手动设置这些项目以尝试强制它有一个值，但没有成功。

怎么回事，有人可以帮忙吗？测试一般在IE11中，因为这是公司标准（不要问）但Chrome中的行为似乎相同，所以我不认为它与浏览器有关。

Answer 1

你正在调用radioButtons.val()，它设置单选按钮的值。但该函数不返回任何内容，因此值设置为空字符串。

此外，您需要在保存时从localStorage中删除未经检查的单选按钮ID。否则，你不会忘记你之前检查过一个按钮。所以StoreValues中用于单选按钮的代码应该是：

radioButtons.each(function() {
    if (this.checked) {
        localStorage.setItem(this.id, true);
    } else {
        localStorage.removeItem(this.id);
    }
});

你也应该为文本项目调用.each()而不是.val()。

并且创建一个click处理程序只是为了检查按钮似乎没有必要。在RestoreValues中写道：

radioButtons.prop("checked", function() {
    return localStorage.getItem(this.id) !== null;
});