Javascript 使用按钮作为；复选框“；在表格中？

目前，我正在为自己建立一个小项目，并提出了一个想法

您可以使用表单中的按钮作为切换来设置数据库中的布尔值吗？ 如果布尔值为真，我想要一个绿色按钮，如果布尔值为假，我想要一个红色按钮

如果我单击按钮，它应该更改他的颜色和值，如果我提交表单，它应该将该值传递给create方法

---

有什么想法吗？

你可以试试这样的

开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
.开关输入{显示：无；}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：红色；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+滑块{
背景色：#2196F3；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196F3；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}

拨动开关

因此，我认为自定义复选框是更好的选择，但是，如果您真的想使用按钮，我会使用隐藏复选框字段并对按钮应用onclick函数来更改隐藏复选框字段的值。 这是一支写着大意的钢笔

HTML

JS

---

使用普通复选框，研究“自定义复选框”，看看有什么技术可以让它们显示为您想要的。

<input type='checkbox' id='hidden_check_box'>
<button class='red' id='toggle_button' onclick="toggle_checkbox()">

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

button {
  width: 20px;
  height: 20px;
  margin: 5px;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

function toggle_checkbox() {
  var checkbox = document.getElementById('hidden_check_box');
  var button = document.getElementById('toggle_button');
  if (!checkbox.checked) {
    checkbox.checked = true;
    button.className = 'green';
  }
  else {
    checkbox.checked = false;
    button.className = 'red';
  }
  console.log(checkbox.checked);
}