提交表单后多选checkbox选中内容无法正确显示问题求助

自定义CSS布局的多选checkbox提交后，测试页面显示结果异常，实际提交值为on，而非预期的选项文本，且必须保留现有布局和多选功能。

相关代码 #

CSS代码 #

input[type=checkbox] { 
  vertical-align: middle; 
  position: relative; 
  bottom: 1px; 
}

label { 
  display: block; 
} 

table {
  table-layout : fixed;
}

.column {
  float: left;
  width: 30%;
  align-items: top;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

HTML代码 #

<div class="column">
  <label><strong>我推荐这本期刊的原因是...*</strong> </label>
  <label>
    <input type="checkbox" id="choice1" name="Choice" checked/>
     这本期刊对我和同事来说是必备资源
  </label>
  <label>
    <input type="checkbox" id="choice2" name="Choice" />
    我会推荐我的学生阅读这本期刊
  </label>
  <label>
    <input type="checkbox" id="choice3" name="Choice" />
    我已在/打算在这本期刊发表文章
  </label>
  <label>
    <div class="flex">
      <input type="checkbox" id="choice4" name="Choice" />
      <textarea id="other" placeholder="其他" rows="2" cols="50"></textarea>
    </div>
  </label>
</div>

已尝试的解决方式 #

• 添加额外标签、div元素
• 查找Stack Overflow上同类自定义CSS问题，要么无效，要么破坏现有布局

提交结果对比 #

预期提交结果：
Choices: 我会推荐我的学生阅读这本期刊
我已在/打算在这本期刊发表文章

实际提交结果：
Choices: on

解决方案 #

问题根源和CSS布局无关，是因为未给checkbox设置value属性，浏览器默认提交on作为选中值。只需给每个<input type="checkbox">添加value属性，值对应选项文本即可，不会影响现有布局。

修改后的HTML代码：

<div class="column">
  <label><strong>我推荐这本期刊的原因是...*</strong> </label>
  <label>
    <input type="checkbox" id="choice1" name="Choice" value="这本期刊对我和同事来说是必备资源" checked/>
     这本期刊对我和同事来说是必备资源
  </label>
  <label>
    <input type="checkbox" id="choice2" name="Choice" value="我会推荐我的学生阅读这本期刊" />
    我会推荐我的学生阅读这本期刊
  </label>
  <label>
    <input type="checkbox" id="choice3" name="Choice" value="我已在/打算在这本期刊发表文章" />
    我已在/打算在这本期刊发表文章
  </label>
  <label>
    <div class="flex">
      <input type="checkbox" id="choice4" name="Choice" value="其他" />
      <textarea id="other" placeholder="其他" rows="2" cols="50"></textarea>
    </div>
  </label>
</div>

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