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

Question

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

让我解释一下：

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

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

为了纠正这个问题，我添加了一些 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();
                }
             });
         }
     });
 }

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

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

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

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

我试过手动设置这些项目，试图强制它有一个值，但没有成功。

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

Answer 1

您正在调用 radioButtons.val()，它设置单选按钮的值。但是函数没有 return 任何东西，所以值被设置为空字符串。

此外，您需要在保存时从 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;
});

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

JQuery Locally Stored Values for RadioButtons missing Values for Postback

jquery

razor

radio-button

local-storage

postback