javascript - 如何制作交互式选项按钮

Question

这就是我想要实现的目标:buttons .

我不知道如何使按钮包含表单数据，并且当我单击提交时仅将选定的按钮发布到 PHP。

这是我到目前为止所拥有的:

var count = 0;

function setColor(btn, color) {
  var property = document.getElementById(btn);
  if (count == 0) {
    property.style.backgroundColor = "#4d4d4d"
    property.style.color = "#ffffff"
    count = 1;
  } else {
    property.style.backgroundColor = "#ffffff"
    property.style.color = '#0000ff'
    count = 0;
  }
}

<button type="button" id="button1" onClick="setColor('button1', '#101010')">
  <input type="radio" name="rooms" value="1">1
  <br>
</button>

<button type="button" id="button2" onClick="setColor('button2', '#101010')">
  <input type="radio" name="rooms" value="2">2
  <br>
</button>

当我单击新选项时，还可以帮助重置其他按钮的颜色，我们将不胜感激。

Answer 1

问题是您的按钮有一个 onclick 监听器，但该监听器也由子元素上的事件触发。 因此，您可以单击按钮但不能单击复选框，并且它会更改其颜色而不修改值。

您应该使用标签，并且使用 CSS3 无需 JavaScript 即可实现它。

HTML:

<div>
  <input type="checkbox" id="option1" name="rooms" />
  <label for="option1">1</label>
</div>
<div>
  <input type="checkbox" id="option2" name="rooms" />
  <label for="option2">2</label>
</div>

CSS:

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

label{
  width: 40px;
  height: 20px;
  color: #4d4d4d;
  background: #FFF;
}

input[type="checkbox"]:checked + label{
  background: #4d4d4d;
  color: #FFF;
}