重置带有选择选项的滑动按钮

问题描述 投票:0回答:2

如果选择或更改选项,如何将按钮复位到YES位置(绿色)?我的jQuery代码不起作用。目前,我的按钮样式消失了。我认为解决方案不是很复杂,但是我没有足够的jquery知识来解决此问题。谢谢!

enter image description here

enter image description here

    $('#select').on('change', function(e) {
      $('#button').toggleClass('onoff');
      e.preventDefault();
    });
.onoff {
  margin-left: -27px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  position: relative;
  cursor: pointer;
  width: 55px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.onoff label {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 240%;
  height: 100%;
  cursor: pointer;
  background: #900;
  border-radius: 5px;
  font-weight: normal; 
  color: #FFF;
  -webkit-transition: background 0.3s, text-indent 0.3s;
  -moz-transition: background 0.3s, text-indent 0.3s;
  -o-transition: background 0.3s, text-indent 0.3s;
  transition: background 0.3s, text-indent 0.3s;
  text-indent: 27px;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
}
.onoff label:after {
  content: 'NO';
  display: block;
  position: absolute;
  top: 0px;
  left: 14px;
  width: 100%;
  font-size: 12px; 
  color: #FFF;
 
  z-index: 1;
}
.onoff label:before {
  content: ''; 
  width: 15px;
  height: 24px;
  border-radius: 3px;
  background: #FFF; 
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 3px;
  display: block;
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  -o-transition: left 0.3s;
  transition: left 0.3s;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}
.onoff input:checked + label {
  background: #378b2c; 
  text-indent: 8px;
}
.onoff input:checked + label:after {
  content: 'YES';
  color: #FFF; 
  left: 14px;
  font-size: 14px; 
}
.onoff input:checked + label:before {
  left: 114px;
}
input[type=checkbox], input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: -5px;
}
input[type=radio] {
    bottom: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="button" class="onoff" style="margin-left:100px">
<input type="checkbox" id="tool_closed_onoff" name="tool_closed_onoff" style="width:20px; height:20px;" />
<label for="tool_closed_onoff" /></label>
</div>

<br /><br />

<div id="select" style="margin-left:100px">
<select>
  <option value="No option" selected="selected">No option</option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>
</div>
jquery html css
2个回答
0
投票

您只需要将输入的checked属性设置为true

$('#select').on('change', function(e) {
      $('#tool_closed_onoff').prop('checked',true);
      e.preventDefault();
    });
.onoff {
  margin-left: -27px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  position: relative;
  cursor: pointer;
  width: 55px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.onoff label {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 240%;
  height: 100%;
  cursor: pointer;
  background: #900;
  border-radius: 5px;
  font-weight: normal; 
  color: #FFF;
  -webkit-transition: background 0.3s, text-indent 0.3s;
  -moz-transition: background 0.3s, text-indent 0.3s;
  -o-transition: background 0.3s, text-indent 0.3s;
  transition: background 0.3s, text-indent 0.3s;
  text-indent: 27px;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
}
.onoff label:after {
  content: 'NO';
  display: block;
  position: absolute;
  top: 0px;
  left: 14px;
  width: 100%;
  font-size: 12px; 
  color: #FFF;
 
  z-index: 1;
}
.onoff label:before {
  content: ''; 
  width: 15px;
  height: 24px;
  border-radius: 3px;
  background: #FFF; 
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 3px;
  display: block;
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  -o-transition: left 0.3s;
  transition: left 0.3s;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}
.onoff input:checked + label {
  background: #378b2c; 
  text-indent: 8px;
}
.onoff input:checked + label:after {
  content: 'YES';
  color: #FFF; 
  left: 14px;
  font-size: 14px; 
}
.onoff input:checked + label:before {
  left: 114px;
}
input[type=checkbox], input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: -5px;
}
input[type=radio] {
    bottom: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="button" class="onoff" style="margin-left:100px">
<input type="checkbox" id="tool_closed_onoff" name="tool_closed_onoff" style="width:20px; height:20px;" />
<label for="tool_closed_onoff" /></label>
</div>

<br /><br />

<div id="select" style="margin-left:100px">
<select>
  <option value="No option" selected="selected">No option</option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>
</div>

0
投票

您有一个if / else语句,因为如果您从选项2/3跳转,将会切换开/关(如果我理解的话,这将导致错误地切换到yes)

请参阅演示

$('select').on('change', function(e) {

  if ($(this).val() === 'No option') {
    $("#tool_closed_onoff").prop('checked', false);
  } else {
    $("#tool_closed_onoff").prop('checked', true);
  }
});
.onoff {
  margin-left: -27px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  position: relative;
  cursor: pointer;
  width: 55px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.onoff label {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 240%;
  height: 100%;
  cursor: pointer;
  background: #900;
  border-radius: 5px;
  font-weight: normal;
  color: #FFF;
  -webkit-transition: background 0.3s, text-indent 0.3s;
  -moz-transition: background 0.3s, text-indent 0.3s;
  -o-transition: background 0.3s, text-indent 0.3s;
  transition: background 0.3s, text-indent 0.3s;
  text-indent: 27px;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
}

.onoff label:after {
  content: 'NO';
  display: block;
  position: absolute;
  top: 0px;
  left: 14px;
  width: 100%;
  font-size: 12px;
  color: #FFF;
  z-index: 1;
}

.onoff label:before {
  content: '';
  width: 15px;
  height: 24px;
  border-radius: 3px;
  background: #FFF;
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 3px;
  display: block;
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  -o-transition: left 0.3s;
  transition: left 0.3s;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

.onoff input:checked+label {
  background: #378b2c;
  text-indent: 8px;
}

.onoff input:checked+label:after {
  content: 'YES';
  color: #FFF;
  left: 14px;
  font-size: 14px;
}

.onoff input:checked+label:before {
  left: 114px;
}

input[type=checkbox],
input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: -5px;
}

input[type=radio] {
  bottom: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="button" class="onoff" style="margin-left:100px">
  <input type="checkbox" id="tool_closed_onoff" name="tool_closed_onoff" style="width:20px; height:20px;" />
  <label for="tool_closed_onoff" />
</div>

<br /><br />

<div id="select" style="margin-left:100px">
  <select>
    <option value="No option" selected="selected">No option</option>
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>
  </select>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.