JavaScript setCookie函数无法存储复选框值问题求助

我一眼就看出问题所在了——你现在的代码里，复选框组的取值逻辑错了！当多个<input type="checkbox">共用同一个name时，myForm.Language返回的是元素集合，而不是单个元素，这时候直接调用.value只会拿到集合里第一个复选框的value，完全不管它有没有被选中，这就是为什么文本框、单选、下拉能用，但复选框不行的原因。

下面是修正后的完整代码，我会标注关键修改点：

修正后的JavaScript代码 #

var today = new Date();
var expiry = new Date(today.getTime() + 30 * 24 * 3600 * 1000); // 有效期30天

function setCookie(name, value) {
  document.cookie = name + "=" + escape(value) + "; path=/; expires=" + expiry.toGMTString();
}

// 修改点1：让storeValues接收一个value参数，不再自己去取表单值
function storeValues(value) {
  setCookie("Language", value);
  return true;
}

function validate() {
  var cbvalues = [];
  var cbs = document.myForm.Language;
  var cbLen = cbs.length;
  
  for (var i = 0; i < cbLen; i++) {
    if (cbs[i].checked) {
      cbvalues.push(cbs[i].value);
    }
  }

  if (cbvalues.length == 0) {
    alert( "Please choose your languages!" );
    return false;
  }

  alert( "You selected: " + cbvalues.join(', ') + ".");
  
  // 修改点2：把收集好的选中值数组转成逗号分隔的字符串，传给storeValues
  return storeValues(cbvalues.join(','));
}

对应的HTML代码（无需修改） #

<form action="form_submitted.html" name="myForm" onsubmit="return(validate());">
  <table>
    <tr>
      <td><input type="checkbox" name="Language" value="English">English</td>
      <td><input type="checkbox" name="Language" value="French">French</td>
      <td><input type="checkbox" name="Language" value="German">German</td>
    </tr>
    <tr>
      <td align="right"></td>
      <td><input type="submit" value="Submit" /></td>
    </tr>
  </table>
</form>

关键逻辑说明 #

1. 复选框组的正确取值方式：必须遍历所有复选框元素，判断checked状态，手动收集选中的value，这部分你在validate里已经写对了，只是之前没把这个收集好的数组传给storeValues。
2. Cookie存储格式：因为Cookie只能存字符串，所以我们用join(',')把数组转成逗号分隔的字符串，之后如果需要读取并还原成数组，只需要用split(',')拆分即可。
3. 为什么其他控件正常：文本框、单选按钮（同name单选组只会有一个选中，.value直接返回选中项）、下拉列表（单选下拉的.value就是选中项的值），它们的.value都能直接拿到正确的用户输入/选中值，所以原来的setCookie调用没问题，但复选框组不适用这个逻辑。

测试一下：提交表单后，打开浏览器控制台输入document.cookie，就能看到Language对应的Cookie值是你选中的语言拼接成的字符串啦～

内容的提问来源于stack exchange，提问作者Rohit