单选按钮的 JQuery 本地存储值缺少回发的值

Question

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

让我解释一下：

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

如果用户在内容中选择了一些单选按钮和评论文本，如果用户决定添加额外的角色标准，那么这将丢失。请注意，此页面上有许多单选按钮和 cmets 字段，它们会根据选择而变化。

为了纠正这个问题，我添加了一些 jQuery 来将 RadioButtons 和 Comments 的值存储在本地存储中，然后在重新绘制上下文区域后重新填充这些值。有问题的单选按钮是使用 Razor 在局部视图 (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 经过，所以我知道它与单选按钮的检查方式有关。如果我保存一个新的表单，而 JQuery 没有重新填充任何内容，那么所有值都是应有的，即单选按钮名称值为 True 或 False。

但是在 JQuery 恢复项目后，每个输入的 value 参数都是“”空白，我注意到检查的值也没有移动，但不确定这是否正常。我尝试使用更多的 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;
});