如何制作交互式选项按钮

How to make interactive option buttons

本文关键字：按钮 选项 交互式 何制作      更新时间：2023-09-26

这就是我想要实现的:按钮。

我不知道如何使按钮包含表单数据，只有选定的按钮post到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>

也帮助重置其他按钮的颜色，当我点击一个新的选项将不胜感激。

问题是您的按钮有一个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;
}

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

指出:

  1. 为了得到你想要的外观， input 本身必须隐藏，所以我们必须使用JavaScript来自动检查 input 当按钮被点击。

  2. 正如您所看到的，我已经为每个按钮添加了 data-check 属性。我这样做是为了避免必须遍历每个按钮的每个子按钮才能找到输入并取消选中它们。它基本上包含了它的 input 子元素的选择器，这样我们就可以使用它来查找 document.querySelector() 的输入。

下面是一个代码片段演示解决方案:

/* ----- 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", "");
  }
});
/* ----- 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;
}
<!----- HTML ----->
<div>
  <p style = "font-size: 1.3em">Rooms</p>
  <div id="button-wrapper">
    <button type="button" id="button1" data-check="[name='rooms'][value='1']" clicked>
      <input type="radio" name="rooms" value="1" checked/><span>1</span>
    </button>
    <button type="button" id="button2" data-check="[name='rooms'][value='2']">
      <input type="radio" name="rooms" value="2" /><span>2</span>
    </button>
    <button type="button" id="button2" data-check="[name='rooms'][value='3']">
      <input type="radio" name="rooms" value="3" /><span>3</span>
    </button>
    <button type="button" id="button2" data-check="[name='rooms'][value='4+']">
      <input type="radio" name="rooms" value="4+" /><span>4+</span>
    </button>
  </div>
</div>

相关文章：