javascript - 复选框内的复选框标签或哪个按钮被激活？

Question

我正在寻找一种解决方案来显示如下内容:

我想创建一个 HTML 表单，您可以在其中选择每周多天。比如星期一、星期二等等。在图像上，您可以看到当天的德语快捷方式。

我可以通过复选框意识到这一点，但在这里我会遇到一个问题，它看起来不像图片。我想在复选框内添加标签。它应该和图片上的一模一样……你有什么想法吗？我该怎么做？

我的另一个想法是创建按钮并在它们被点击时简单地改变颜色......但是我怎么知道哪个按钮被点击/被选中？

如有任何帮助，我将不胜感激!

亲切的问候

Answer 1

在类似情况下，我选择隐藏复选框并将样式应用于跨度。看看这个想法，看看它是否适合你。它不需要 javascript。

input[type=checkbox] {
    display: none;
}

label :checked + span {
    background: blue;
    color: white;
}

label span {
    display: inline-block;
    background: lightgrey;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
}

<label>
  <input type="checkbox" checked>
  <span>Mo</span>
</label>
<label>
  <input type="checkbox">
  <span>Di</span>
</label>
<label>
  <input type="checkbox">
  <span>Mi</span>
</label>
<label>
  <input type="checkbox">
  <span>Do</span>
</label>
<label>
  <input type="checkbox" checked>
  <span>Fr</span>
</label>
<label>
  <input type="checkbox">
  <span>Sa</span>
</label>
<label>
  <input type="checkbox">
  <span>So</span>
</label>