如何从本地JSON文件恢复HTML复选框状态并解决加载时的JSON解析错误？

你遇到的加载失败问题核心原因很明确：你直接把本地文件路径字符串传给了fromJSON方法，但这个方法需要的是JSON格式的字符串内容，而不是文件路径。当JSON.parse尝试解析"file:///k:/projects/FORM.fields.json"这个字符串时，自然会抛出语法错误——因为这根本不是有效的JSON格式。

另外，浏览器出于安全限制，也不允许JavaScript直接通过file://协议读取本地文件内容，必须通过用户主动选择文件的方式来获取文件数据。下面是完整的修复方案：

1. 修复HTML结构 #

添加一个隐藏的文件选择输入框，用来让用户选择本地的JSON文件：

<form class="center" action="#" method="get" id="TableForm">
  <button id="SaveFile">Save</button>
  <!-- 添加隐藏的文件选择框 -->
  <input type="file" id="FileLoader" accept=".json" style="display:none;">
  <button id="LoadFile">Load</button>
  <input type="reset">
  <table class="center">
    <tbody>
      <tr>
        <td><input type="checkbox" name="checkfield0" /></td>
        <td>Some descriptive element here</td>
        <td>Some descriptive element here</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="checkfield1" /></td>
        <td>Some descriptive element here</td>
        <td>Some descriptive element here</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="checkfield2" /></td>
        <td>Some descriptive element here</td>
        <td>Some descriptive element here</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="checkfield3" /></td>
        <td>Some descriptive element here</td>
        <td>Some descriptive element here</td>
      </tr>
    </tbody>
  </table>
</form>

2. 修复JavaScript加载逻辑 #

修改加载按钮的点击事件，通过FileReader API读取用户选择的JSON文件内容，再传给fromJSON方法：

(function($) {
 $.fn.toJSON = function() {
 var $elements = {};
 var $form = $(this);
 $form.find('input, select, textarea').each(function(){
 var name = $(this).attr('name')
 var type = $(this).attr('type')
 if(name){
 var $value;
 if(type == 'radio'){
 $value = $('input[name='+name+']:checked', $form).val()
 } else if(type == 'checkbox'){
 $value = $(this).is(':checked')
 } else {
 $value = $(this).val()
 }
 $elements[$(this).attr('name')] = $value
 }
 });
 return JSON.stringify( $elements )
 };
 $.fn.fromJSON = function(json_string) {
 var $form = $(this)
 var data = JSON.parse(json_string)
 $.each(data, function(key, value) {
 var $elem = $('[name="'+key+'"]', $form)
 var type = $elem.first().attr('type')
 if(type == 'radio'){
 $('[name="'+key+'"][value="'+value+'"]').prop('checked', true)
 } else if(type == 'checkbox'){
 // 同时处理选中和未选中的情况
 $('[name="'+key+'"]').prop('checked', value === true || value === 'true');
 } else {
 $elem.val(value)
 }
 })
 };
}( jQuery ));

// TESTING CODE
$(document).ready(function(){
 $("#SaveFile").on('click', function(){
 console.log("Saving form data...")
 var data = $("form#TableForm").toJSON()
 console.log(data);
 function saveText(text, filename){
 var a = document.createElement('a');
 a.setAttribute('href', 'data:text/plain;charset=utf-8,'+encodeURIComponent(text));
 a.setAttribute('download', filename);
 a.click()
 }
 saveText( data, "FORM.fields.json" );
 return false;
 })
 
 $("#LoadFile").on('click', function(){
 console.log("Loading form data...");
 // 触发隐藏的文件选择框
 $("#FileLoader").click();
 });

 // 处理文件选择后的读取逻辑
 $("#FileLoader").on('change', function(e){
 const selectedFile = e.target.files[0];
 if (!selectedFile) return;

 const reader = new FileReader();
 reader.onload = function(event){
 try {
 const jsonContent = event.target.result;
 console.log("Loaded JSON content:", jsonContent);
 // 将读取到的JSON字符串传给fromJSON
 $("form#TableForm").fromJSON(jsonContent);
 console.log("Checkbox states restored successfully!");
 } catch (error) {
 console.error("Error parsing JSON file:", error);
 alert("Failed to load file - please ensure it's a valid JSON file.");
 }
 };
 // 以文本形式读取文件
 reader.readAsText(selectedFile);
 });
});

关键修复点说明 #

1. 文件读取方式：通过用户主动选择文件的方式绕过浏览器的本地文件访问限制，使用FileReader API读取文件内容
2. fromJSON方法完善：补充了复选框未选中状态的处理逻辑（原来只处理了true的情况，现在会根据JSON中的false值取消选中）
3. 错误处理：添加了try-catch块，捕获JSON解析错误并给出友好提示

现在点击Load按钮后，会弹出文件选择框，选择你之前保存的FORM.fields.json文件，就能正确恢复所有复选框的状态了。

内容的提问来源于stack exchange，提问作者Tormy Van Cool