Question

这就是我想要实现的目标：buttons。

我无法弄清楚如何让按钮包含表单数据，并且在点击提交时只有选中的按钮发布到PHP。

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

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

还有助于重置其他按钮＆＃39;我点击一个新选项的颜色将不胜感激。

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;
}

Answer 2

如果您只使用一点JavaScript，那么以下内容将是您所需要的：

<强>代码：

var buttons = document.querySelectorAll("button[id^=button]");
[].forEach.call(buttons, function(button) {
   button.onclick = function() {        
      /* Remove the 'checked' attribute from the other inputs */
      [].forEach.call(buttons, function(each) {
         if (button !== each) [].forEach.call(each.children, function(child) {
            if (child.nodeName === "INPUT") child.removeAttribute("checked");
         });
      });

      /* Check the child input */
      document.querySelector(this.getAttribute("data-check")).setAttribute("checked", "");

      /* Remove the 'clicked' attribute from every button */
      [].forEach.call(buttons, function(each) {
         each.removeAttribute("clicked");
      });

      /* Add the 'clicked' attribute to the clicked button */
      this.setAttribute("clicked", "");
   }
});

备注：

为了获得您想要的外观，必须隐藏 input 本身，因此我们必须使用JavaScript自动检查 {{1}单击按钮时。

正如您所看到的，我为每个按钮添加了 input 属性。我这样做了，为了避免必须遍历每个按钮的每个子节点以找到输入并取消选中它们。它基本上包含 data-check 子项的选择器，以便我们可以使用 input 立即查找输入。

这是代码段，展示了解决方案：

＆＃13;
＆＃13;
document.querySelector()
＆＃13;
/* ----- JavaScript ----- */ var buttons = document.querySelectorAll("button[id^=button]"); [].forEach.call(buttons, function(button) { button.onclick = function() { /* Remove the 'checked' attribute from the other inputs */ [].forEach.call(buttons, function(each) { if (button !== each)[].forEach.call(each.children, function(child) { if (child.nodeName === "INPUT") child.removeAttribute("checked"); }); }); /* Check the child input */ document.querySelector(this.getAttribute("data-check")).setAttribute("checked",""); /* Remove the 'clicked' attribute from every button */ [].forEach.call(buttons, function(each) { each.removeAttribute("clicked"); }); /* Add the 'clicked' attribute to the clicked button */ this.setAttribute("clicked", ""); } });
＆＃13;
/* ----- CSS ----- */ input[name="rooms"] { display: none; } button { background-color: white; border: 1px solid grey; border-radius: 50%; color: dodgerblue; cursor: pointer; font-size: 1em; font-weight: 600; height: 50px; outline: none; transition: background-color .3s ease, color .3s ease; width: 50px; } button[clicked] { color: white; background-color: grey; }
＆＃13;
＆＃13;
＆＃13;

如何制作交互式选项按钮

2 个答案: