While switching button how can i change text color?-CodePudding

.toggle-switch input[type=checkbox] {
    display: none
}

.toggle-switch label {
    cursor: pointer;
}

.toggle-switch label .toggle-track {
    display: block;
    height: 10px;
    width: 85px;
    background: #eee;
    border-radius: 20px;
    position: relative;
    margin-bottom: 5px;
    border: 1px solid #ccc;
}

.toggle-switch .toggle-track:before{
  content:'';
  display:inline-block;height:18px;width:18px;background:blue;
  border-radius:20px;
  position:absolute;
  top:-5px;
  left:0;
  transition:left .5s ease-in;
}

.toggle-switch input[type="checkbox"]:checked   label .toggle-track:before {
  background:green;
  left:70px;
 
}

 <div >
 <div >
     <div  >ENABLE</div>
          <div >
            <div >
               <input type="checkbox" id="chkTest" name="chkTest">
                    <label for="chkTest">
                        <span ></span>
                     </label>
             </div>
           </div>
                                           
      <div >DISABLE</div>
   </div>
  </div>

The color of text changing according to the witching toggled button. When it click on toggle button text color will change according to the switch button color is changing the text color will change too.

CodePudding user response：

You can add an event listener when click the switch to define your changing color logic.

const checkbox = document.getElementById('chkTest');
const enableText = document.getElementById('enable');
const disableText = document.getElementById('disable');

checkbox.addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
    enableText.classList.add("green-text");
    disableText.classList.remove("blue-text");
  } 
  else {
    disableText.classList.add("blue-text");
    enableText.classList.remove("green-text");
  }
})

.toggle-switch input[type=checkbox] {
  display: none
}

.toggle-switch label {
  cursor: pointer;
}

.toggle-switch label .toggle-track {
  display: block;
  height: 10px;
  width: 85px;
  background: #eee;
  border-radius: 20px;
  position: relative;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}

.toggle-switch .toggle-track:before {
  content: '';
  display: inline-block;
  height: 18px;
  width: 18px;
  background: blue;
  border-radius: 20px;
  position: absolute;
  top: -5px;
  left: 0;
  transition: left .5s ease-in;
}

.toggle-switch input[type="checkbox"]:checked label .toggle-track:before {
  background: green;
  left: 70px;
}

.green-text {
  color: green;
}

.blue-text {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div id="enable" >ENABLE</div>
    <div >
      <div >
        <input type="checkbox" id="chkTest" name="chkTest">
        <label for="chkTest">
          <span ></span>
       </label>
      </div>
    </div>

    <div id="disable" >DISABLE</div>
  </div>
</div>

CodePudding user response：

CSS only version

My first thought was to use javascript to switch the styles. To be honest, I prefer to use javascript. But some people try to avoid javascript because they are not familiar with it. Then you can only use css. The only disadvantage of css is that the slibing selector is like a waterfall and you can't slide up. So in my case I had to work with negative margins. It works well, but you have to compromise with the margins to position the text elements.

#nocheck {
  margin-top: -45px;
  margin-bottom: 30px;
}
.toggle-switch {
  padding:50px;
}

#chkTest:checked ~ #check { color: green; }
#chkTest:checked ~ #nocheck { color: black; }
#check { color: black; }
#nocheck { color: blue; }

.toggle-switch input[type=checkbox] {
    display: none
}

.toggle-switch label {
    cursor: pointer;
}

.toggle-switch label .toggle-track {
    display: block;
    height: 10px;
    width: 85px;
    background: #eee;
    border-radius: 20px;
    position: relative;
    margin-bottom: 5px;
    border: 1px solid #ccc;
}

.toggle-switch .toggle-track:before{
  content:'';
  display:inline-block;height:18px;width:18px;background:blue;
  border-radius:20px;
  position:absolute;
  top:-5px;
  left:0;
  transition:left .5s ease-in;
}

.toggle-switch input[type="checkbox"]:checked   label .toggle-track:before {
  background:green;
  left:70px;
 
}

  <div >
    <div >
      
      <input type="checkbox" id="chkTest" name="chkTest">
      <label for="chkTest">
        <span ></span>
      </label>
      <div  id="nocheck">ENABLE</div>
      <div  id="check">DISABLE</div>
      
    </div>
  </div>

CodePudding user response：

Let me help too

document.addEventListener('DOMContentLoaded', function () {
  var checkbox = document.querySelector('input[type="checkbox"]');

  checkbox.addEventListener('change', function () {
    if (checkbox.checked) {
      // do this
       document.getElementById("myH2").style.color = "#ff0000";
       document.getElementById("myH1").style.color = "black";
      console.log('Checked');
    } else {
      // do that
      document.getElementById("myH2").style.color = "black";
       document.getElementById("myH1").style.color = "#ff0000";
      console.log('Not checked');
    }
  });
});

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked   .slider {
  background-color: #2196F3;
}

input:focus   .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked   .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

<h2 id="myH2">Toggle Switch</h2>

<label >
  <input type="checkbox">
  <div ></div>
</label>
<h2 id="myH1" style="color:red">Toggle Switch</h2>