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>

Please include the codes that are only necessary, you have said that you have a `radio buttons` but in your code I cannot see any radio button. — Francis G, Sep 13 '19 at 05:49
Possible duplicate of [Custom radio button using css](https://stackoverflow.com/questions/35221259/custom-radio-button-using-css) — nazifa rashid, Sep 13 '19 at 05:50

score 2 · Answer 1 · answered Sep 13 '19 at 05:53

If you want to achieve this with pure JavaScript, you could bind a click handler to each element. The handler would modify the element's class when the button was clicked:

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>

See these two answers for more information on binding events without a framework and changing the class of elements.

An alternative

If you're open to using a library such as jQuery, binding the event handler could be a lot simpler. With the jQuery library included, your code would be:

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

See the jQuery documentation for more information on .click().

score 0 · Answer 2 · answered Sep 13 '19 at 06:02

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

for (var i = 0; i < button.length; i++) {   
 button[i].onmouseover = function() {
    this.classList.remove('btn-outline-secondary');
    this.classList.add('btn-primary');
 }
 
 button[i].onmouseout = function() {
    this.classList.remove('btn-primary');
    this.classList.add('btn-outline-secondary');
 }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <div class="caontainer">
    <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>
  </div>
</body>
</html>

Hope it'll help :)

Change background when select

2 Answers2

An alternative