Javascript 如何制作交互式选项按钮

这就是我想要达到的目标：

我不知道如何使按钮包含表单数据，并在单击submit时将所选按钮发布到PHP

以下是我目前掌握的情况：

var计数=0；
功能设置颜色（btn，颜色）{
var属性=document.getElementById（btn）；
如果（计数=0）{
property.style.backgroundColor=“#4d”
property.style.color=“#ffffffff”
计数=1；
}否则{
property.style.backgroundColor=“#ffffff”
property.style.color='#0000ff'
计数=0；
}
}

1.


2.

问题在于，您的按钮有一个

onclick

监听器，但监听器也会由子元素上的事件触发。 因此，您可以单击按钮，但不能单击复选框，它会在不修改值的情况下更改其颜色

您应该使用一个标签，使用CSS3，您可以在不使用JavaScript的情况下使用它

HTML:

---

问题在于，您的按钮有一个

onclick

侦听器，但该侦听器也由子元素上的事件触发。 因此，您可以单击按钮，但不能单击复选框，它会在不修改值的情况下更改其颜色

您应该使用一个标签，使用CSS3，您可以在不使用JavaScript的情况下使用它

HTML:

---

如果您可以只使用一点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", "");
   }
});

---

注意事项：

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", "");
   }
});

为了获得您想要的外观，

输入本身必须隐藏，因此我们必须使用JavaScript在单击按钮时自动检查
输入

如您所见，我为每个按钮添加了一个

数据检查属性。我这样做是为了避免为了找到输入并取消选中它们而必须迭代每个按钮的每个子项。它基本上包含其
输入子项的选择器，因此我们可以使用它通过
document.querySelector（）立即查找输入

---

下面是一个演示解决方案的片段：

/*----JavaScript---*/
var buttons=document.queryselectoral（“按钮[id^=button]”）；
[]forEach.调用（按钮、函数（按钮）{
button.onclick=函数（）{
/*从其他输入中删除“checked”属性*/
[]forEach.调用（按钮、函数（每个）{
if（button！==each）[.forEach.call（each.children，function（child））{
如果（child.nodeName==“INPUT”）child.removeAttribute（“选中”）；
});
});
/*检查子输入*/
document.querySelector（this.getAttribute（“数据检查”））.setAttribute（“已检查”），”；
/*从每个按钮中删除“单击”属性*/
[]forEach.调用（按钮、函数（每个）{
每个。删除属性（“单击”）；
});
/*将“clicked”属性添加到单击的按钮*/
此.setAttribute（“单击的“，”）；
}
});
/*----CSS-----*/
输入[name=“rooms”]{
显示：无；
}
钮扣{
背景色：白色；
边框：1px纯灰；
边界半径：50%；
颜色：淡蓝色；
光标：指针；
字号：1em；
字号：600；
高度：50px；
大纲：无；
过渡：背景色。3s轻松，颜色。3s轻松；
宽度：50px；
}
按钮[点击]{
颜色：白色；
背景颜色：灰色；
}

房间
1.
2.
3.
4+
如果您可以只使用一点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", "");
   }
});


注意事项：

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", "");
   }
});

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

如您所见，我为每个按钮添加了一个
数据检查属性。我这样做是为了避免为了找到输入并取消选中它们而必须迭代每个按钮的每个子项。它基本上包含其
输入子项的选择器，因此我们可以使用它通过
document.querySelector（）立即查找输入


下面是一个演示解决方案的片段：


/*----JavaScript---*/
var buttons=document.queryselectoral（“按钮[id^=button]”）；
[]forEach.调用（按钮、函数（按钮）{
button.onclick=函数（）{
/*从其他输入中删除“checked”属性*/
[]forEach.调用（按钮、函数（每个）{
if（button！==each）[.forEach.call（each.children，function（child））{
如果（child.nodeName==“INPUT”）child.removeAttribute（“选中”）；
});
});
/*检查子输入*/
document.querySelector（this.getAttribute（“数据检查”））.setAttribute（“已检查”），”；
/*从每个按钮中删除“单击”属性*/
[]forEach.调用（按钮、函数（每个）{
每个。删除属性（“单击”）；
});
/*将“clicked”属性添加到单击的按钮*/
此.setAttribute（“单击的“，”）；
}
});
/*----CSS-----*/
输入[name=“rooms”]{
显示：无；
}
钮扣{
背景色：白色；
边框：1px纯灰；
边界半径：50%；
颜色：淡蓝色；
光标：指针；
字号：1em；
字号：600；
高度：50px；
大纲：无；
过渡：背景色。3s轻松，颜色。3s轻松；
宽度：50px；
}
按钮[点击]{
颜色：白色；
背景颜色：灰色；
}

房间
1.
2.
3.
4+
由于问题不太清楚，所以一定要细化问题。@David