javascript - Change background when select

Question

I'm trying out bootstrap and seem to be stuck. I have some radio buttons but what I want is it to be outlined when not selected and solid or "btn-primary" when it is selected.

I can attempt to do wit with JavaScript but i might have to give each an individual ID and go from there. I'm sure there is a better way with JavaScript

        <div class="row">
            <div class="col offset-md-2">
                <div class="form-group">
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
                        <button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
                        <button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
                        <button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
                        <button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
                        <button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
                        <button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
                    </div>      
                </div>
            </div>
        </div>

标签： javascriptbootstrap-4

Answer 1

如果您想使用纯 JavaScript 来实现这一点，您可以将点击处理程序绑定到每个元素。单击按钮时，处理程序将修改元素的类：

var buttons = document.getElementsByTagName("button");

for (var i = 0; i < buttons.length; i++) {   

 buttons[i].onclick = function() {
    this.classList.remove('btn-outline-secondary');
    this.classList.add('btn-primary');
 }

}

.btn-outline-secondary {border: 1px solid #aaa;}
.btn-primary {border: 1px solid blue; background: blue; color: white;}

<div class="row">
  <div class="col offset-md-2">
    <div class="form-group">
      <div class="btn-group">
        <button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
        <button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
        <button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
        <button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
        <button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
        <button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
        <button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
      </div>
    </div>
  </div>
</div>

有关在没有框架的情况下绑定事件和更改元素类的更多信息，请参阅这两个答案。

替代

如果您愿意使用 jQuery 等库，绑定事件处理程序可能会简单得多。包含 jQuery 库后，您的代码将是：

$("button").click(function(){ /*apply new class using .removeClass() and .addClass() methods*/ });

有关 .click() 的更多信息，请参阅jQuery 文档。