<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="ios7-switches.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.switch {
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.switch input[type="checkbox"],
.switch input[type="radio"] {
  display: none;
}
.switch input[type="checkbox"] + label,
.switch input[type="radio"] + label {
  display: block;
  position: relative;
  vertical-align: middle;
  border: 1px solid #e3e3e3;
  border-radius: 15px;
  background-color: #e3e3e3;
  cursor: pointer;
  height: 30px;
  width: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition-property: border, background-color;
  -moz-transition-property: border, background-color;
  transition-property: border, background-color;
}
.switch input[type="checkbox"] + label, .switch input[type="checkbox"] + label:after, .switch input[type="checkbox"] + label:before,
.switch input[type="radio"] + label,
.switch input[type="radio"] + label:after,
.switch input[type="radio"] + label:before {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.switch input[type="checkbox"] + label:after, .switch input[type="checkbox"] + label:before,
.switch input[type="radio"] + label:after,
.switch input[type="radio"] + label:before {
  display: inherit;
  content: " ";
  background: white;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
}
.switch input[type="checkbox"] + label:before,
.switch input[type="radio"] + label:before {
  border-radius: 15px;
  background-color: white;
  height: 28px;
  width: 48px;
}
.switch input[type="checkbox"] + label:after,
.switch input[type="radio"] + label:after {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 14px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  height: 28px;
  width: 28px;
}
.switch input[type="checkbox"]:checked + label,
.switch input[type="radio"]:checked + label {
  border-color: #2ecc71;
  background-color: #2ecc71;
}
.switch input[type="checkbox"]:checked + label:before,
.switch input[type="radio"]:checked + label:before {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.switch input[type="checkbox"]:checked + label:after,
.switch input[type="radio"]:checked + label:after {
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  -ms-transform: translateX(20px);
  -o-transform: translateX(20px);
  transform: translateX(20px);
}
.switch input[type="checkbox"]:disabled + label, .switch input[type="checkbox"]:disabled:checked + label,
.switch input[type="radio"]:disabled + label,
.switch input[type="radio"]:disabled:checked + label {
  background-color: #e3e3e3;
  border-color: #e3e3e3;
  cursor: default;
  box-shadow: none;
}
.switch input[type="checkbox"]:disabled + label:before, .switch input[type="checkbox"]:disabled:checked + label:before,
.switch input[type="radio"]:disabled + label:before,
.switch input[type="radio"]:disabled:checked + label:before {
  background-color: #e3e3e3;
}
.switch.switch-warning input:checked + label {
  background-color: #e67e22;
  border-color: #e67e22;
  box-shadow: inset 0px 0px 0px 16px #e67e22;
}
.switch.switch-danger input:checked + label {
  background-color: #e74c3c;
  border-color: #e74c3c;
  box-shadow: inset 0px 0px 0px 16px #e74c3c;
}
.switch.switch-info input:checked + label {
  background-color: #3498db;
  border-color: #3498db;
  box-shadow: inset 0px 0px 0px 16px #3498db;
}
</style>
</head>
<body>

      <div class="switch">
        <input type="checkbox" checked="checked" name="cb3" id="cb3" />
        <label for="cb3"></label>
      </div>

<input type="textbox" id="num" class="value" value="1" />

      <div class="switch">
        <input type="checkbox" name="cb1" id="cb1" />
        <label for="cb1"></label>
      </div>

<input type="textbox" id="num" class="value" value="0" />
<script type="text/javascript">
var checkbox = $("input[type=checkbox]"),
    textbox = $("input[type=textbox]");

checkbox.click(function() {
    var value = textbox.attr('value');
    textbox.attr('value', value === '0' ? '1' : '0');
});
</script>
</body>

</html>

实际上,文本框应该依赖于上一个复选框。
我的意思是如果checbox 1是绿色的,那么文本框1的值是0
如果chbok1为白色,则txbox1为1。
它也与其他复选框相同。
基本上,文本框应该依赖于上一个复选框。
我试过这种方法但没用
$(this).parents().siblings('.value').val(1);

提前谢谢!

最佳答案

我希望你在找这个:

var checkbox = $("input[type=checkbox]"),
    textbox = $("input[type=textbox]");

checkbox.click(function() {
    if ($(this).prop('checked') === true){
      $(this).closest('.switch').next('input[type="textbox"]').val('1');
    }
    else{
      $(this).closest('.switch').next('input[type="textbox"]').val('0');
    }
 });   

.switch {
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.switch input[type="checkbox"],
.switch input[type="radio"] {
  display: none;
}
.switch input[type="checkbox"] + label,
.switch input[type="radio"] + label {
  display: block;
  position: relative;
  vertical-align: middle;
  border: 1px solid #e3e3e3;
  border-radius: 15px;
  background-color: #e3e3e3;
  cursor: pointer;
  height: 30px;
  width: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition-property: border, background-color;
  -moz-transition-property: border, background-color;
  transition-property: border, background-color;
}
.switch input[type="checkbox"] + label, .switch input[type="checkbox"] + label:after, .switch input[type="checkbox"] + label:before,
.switch input[type="radio"] + label,
.switch input[type="radio"] + label:after,
.switch input[type="radio"] + label:before {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.switch input[type="checkbox"] + label:after, .switch input[type="checkbox"] + label:before,
.switch input[type="radio"] + label:after,
.switch input[type="radio"] + label:before {
  display: inherit;
  content: " ";
  background: white;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
}
.switch input[type="checkbox"] + label:before,
.switch input[type="radio"] + label:before {
  border-radius: 15px;
  background-color: white;
  height: 28px;
  width: 48px;
}
.switch input[type="checkbox"] + label:after,
.switch input[type="radio"] + label:after {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 14px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  height: 28px;
  width: 28px;
}
.switch input[type="checkbox"]:checked + label,
.switch input[type="radio"]:checked + label {
  border-color: #2ecc71;
  background-color: #2ecc71;
}
.switch input[type="checkbox"]:checked + label:before,
.switch input[type="radio"]:checked + label:before {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.switch input[type="checkbox"]:checked + label:after,
.switch input[type="radio"]:checked + label:after {
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  -ms-transform: translateX(20px);
  -o-transform: translateX(20px);
  transform: translateX(20px);
}
.switch input[type="checkbox"]:disabled + label, .switch input[type="checkbox"]:disabled:checked + label,
.switch input[type="radio"]:disabled + label,
.switch input[type="radio"]:disabled:checked + label {
  background-color: #e3e3e3;
  border-color: #e3e3e3;
  cursor: default;
  box-shadow: none;
}
.switch input[type="checkbox"]:disabled + label:before, .switch input[type="checkbox"]:disabled:checked + label:before,
.switch input[type="radio"]:disabled + label:before,
.switch input[type="radio"]:disabled:checked + label:before {
  background-color: #e3e3e3;
}
.switch.switch-warning input:checked + label {
  background-color: #e67e22;
  border-color: #e67e22;
  box-shadow: inset 0px 0px 0px 16px #e67e22;
}
.switch.switch-danger input:checked + label {
  background-color: #e74c3c;
  border-color: #e74c3c;
  box-shadow: inset 0px 0px 0px 16px #e74c3c;
}
.switch.switch-info input:checked + label {
  background-color: #3498db;
  border-color: #3498db;
  box-shadow: inset 0px 0px 0px 16px #3498db;
}   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="switch">
        <input type="checkbox" checked="checked" name="cb3" id="cb3" />
        <label for="cb3"></label>
      </div>

<input type="textbox" id="num" class="value" value="1" />

      <div class="switch">
        <input type="checkbox" name="cb1" id="cb1" />
        <label for="cb1"></label>
      </div>

<input type="textbox" id="num" class="value" value="0" />

关于javascript - 通过上一个复选框更改文本框的值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29989987/

10-12 12:53
查看更多