Question

欢迎所有人。实际上我知道当用户按下按钮时如何调用URL。这是一个示例：

<form action="generator/doWork" method="GET" target="_blank">
     <input type="submit" value="Do Work">
</form>

现在的问题是，当用户按下开关时，目的是启用或禁用我的网络功能之一。当开关打开时，必须在按下开关并设置OFF时调用generator/disable url，当开关关闭时，必须在按下开关时调用generator/enable url并且必须为ON设置好的。我不知道该怎么做。任何帮助都会有用。

这是我的开关按钮。

<div class="value" id="onOffSwitch">
<div class="onoffswitch">
     <label class="switch">
        <input type="checkbox">
        <div class="slider round"></div>
     </label>
</div>
</div>

切换按钮的CSS：

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 28px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.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: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #D40066;
}

input:focus + .slider {
  box-shadow: 0 0 1px #D40066;
}

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

/* Rounded sliders */
.slider.round {
  border-radius: 28px;
}

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

非常感谢

Answer 1

使用javascript，您可以执行以下操作：

(function(){ //wait for load event
  var form = document.getElementById('formtoedit');
  var button = document.getElementById('button_switch');

  button.addEventListener('click',function(){
    if(this.checked){
      form.setAttribute('action','generator/stop');
    }else{
      form.setAttribute('action','generator/doWork');        
    }
  });
 
})();

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 28px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.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: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #D40066;
}

input:focus + .slider {
  box-shadow: 0 0 1px #D40066;
}

input:checked + .slider:before {
  -webkit-transform: translateX(52px);
  -ms-transform: translateX(52px);
  transform: translateX(52px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 28px;
}

.slider.round:before {
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formtoedit" action="generator/doWork" method="GET" target="_blank">
     <input type="submit" value="Do Work">
</form>

<div class="value" id="onOffSwitch">
<div class="onoffswitch">
     <label class="switch">
        <input id="button_switch" type="checkbox">
        <div class="slider round"></div>
     </label>
</div>
</div>

这会根据按钮状态更改窗体的action属性。

Answer 2

您可以通过简单的jQuery实现此目标

$(document).ready(function(){
  $('.switch').click(function(){
    if ($(this).find('input[type=checkbox]').prop('checked')) {
      // When ON
      $('form').prop('action', 'generator/enable');
    } else {
      // When OFF
      $('form').prop('action', 'generator/disable');
    }
  });
});

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 28px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.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: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #D40066;
}

input:focus + .slider {
  box-shadow: 0 0 1px #D40066;
}

input:checked + .slider:before {
  -webkit-transform: translateX(52px);
  -ms-transform: translateX(52px);
  transform: translateX(52px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 28px;
}

.slider.round:before {
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="generator/disable" method="GET" target="_blank">
  <input type="submit" value="Do Work">
</form>

<p>&nbsp;</p>

<div class="value" id="onOffSwitch">
<div class="onoffswitch">
     <label class="switch">
        <input type="checkbox">
        <div class="slider round"></div>
     </label>
</div>
</div>

请运行代码段并查看通过chrome中的inspect元素更改表单的action ...告诉我们：）

Answer 3

试试这个

jsfiddle.net/tVM5H/1 /

而不是提醒，您可以调用您的函数来打开网址

当“切换”按钮打开时调用两个不同的URL o关闭

3 个答案: