javascript - How to add function in toggle button - Stack Overflow

admin管理员组

文章数量:1391981

I want to add some functionality on toggle button change. Currently it has no functionality in toggle change. I want a method that will be called on toggle change and do some work if it is off and if it is on. I want to show and hide some link under toggle change. I have attached the sample code (CSS and HTML). Please some one help me to write the syntax.

.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);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<h2>Toggle Switch</h2>
<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

I want to add some functionality on toggle button change. Currently it has no functionality in toggle change. I want a method that will be called on toggle change and do some work if it is off and if it is on. I want to show and hide some link under toggle change. I have attached the sample code (CSS and HTML). Please some one help me to write the syntax.

.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);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<h2>Toggle Switch</h2>
<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Nov 9, 2017 at 17:17 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Nov 9, 2017 at 17:15 anirban karakanirban karak 74077 silver badges2020 bronze badges 3

• 2 If you're doing this in jQuery, you can use the $('selector').change() method to watch for changes to the checkbox and show() and hide() to show/hide your other element. Give it a try, if you get stuck we can help with the specifics :) – delinear Commented Nov 9, 2017 at 17:18
• 1 You can use jQuery . It is very easy. Stackoverflow is not a place where people write code for you. People only can help you. So, you should be try first. – acoder Commented Nov 9, 2017 at 18:04
• Hi, you can try from this: kevinleary/jquery-checkbox-checked – acoder Commented Nov 9, 2017 at 18:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can use plain javascript by putting an onchange function on the input checkbox and toggling the links display property. The function below looks at the checkbox whenever it is click and if it is checked, will display the link as block, and if it is unchecked, it will display the link as none (hide it).

function toggleCheck() {
  if(document.getElementById("myCheckbox").checked === true){
    document.getElementById("aLink").style.display = "block";
  } else {
    document.getElementById("aLink").style.display = "none";
  }
}

.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);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<h2>Toggle Switch</h2>
<label class="switch">
  <input type="checkbox" id="myCheckbox" onchange="toggleCheck()" checked>
  <span class="slider round"></span>
</label>
<a id="aLink" href="" style="display:block;">Link</a>

$('#toggle').on('click', function(){
    if ( $(this).is(':checked') ) {
        $('#link').show();
    } 
    else {
        $('#link').hide();
    }
});

.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);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Toggle Switch</h2>
<label class="switch">
  <input id="toggle" type="checkbox" checked>
  <span class="slider round"></span>
</label>
<br/>
<a href="www.stackoverflow." id="link">Link</a>

本文标签： javascriptHow to add function in toggle buttonStack Overflow