HTML使用按钮作为＆＃39;单选按钮＆＃39;并在报刊上申请不同的州

Question

所以我正在寻找一个解决方案，使用一些按钮作为单选按钮＆＃39;在一个表单中，想象你点击（只有一个可能被按下）下面的一个按钮，它获得一个新的css标签，可能是背景颜色或其他东西，所以你知道你已经点击它，并在表单中被标记为地选择。

基本上我有一个由下面的很多部分组成的页面，它本质上是一种形式，但我需要使用按钮作为多选择＆＃39;并设置一个当您单击按钮时激活的状态，并保留在整个页面中。

显然对javascript开放，因为我认为这就是需要的东西。

Answer 1

您只能使用html和css：

.input-radio{
  display: inline-block;
  margin-right: 10px;
  margin-top: 30px;
}
input[type=radio] {
    display: none;
  }
  input[type=radio] + label {
    padding: 20px;
    border-radius: 40px;
    border: 1px solid #ddd;
 
  }
 input[type=radio] + label:hover {
    border: 1px solid red;
  }
  input[type=radio]:checked + label {
    border: 1px solid red;
  }

<div class="input-radio"><input type="radio" id="male" name="gender" value="male" checked> <label for="male">male</label></div>
<div class="input-radio"><input type="radio" id="female" name="gender" value="female"> <label for="female">Icecrea</label></div>
<div class="input-radio"><input type="radio" name="gender" id="other" value="other"> <label for="other">Vanilla</label></div>

Answer 2

你能用jQuery控制选择效果吗？也许你可以像这样在按钮周围包裹一个div：

<div class="button-div">
    <a class="btn-1">Learn More</a>
    <a class="btn-2">I want this</a>
    <a class="btn-3">No thanks</a>
</div>

然后有一个像这样的onclick函数？

$('.button-div a').on('click', function(){
    var getButton = $(this).attr('class');
    $('.button-div a').removeClass('active');
    $('.button-div a.' + getButton).addClass('active');
}

然后在活动类上有一个样式

.button-div .active {
    background: red;
}

只是粗暴但有希望有帮助？