Question

<!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为绿色，则文本box1值为0 如果chbok1为白色，则txbox1为1。

它也与其他复选框相同。

基本上，文本框应该取决于上一个复选框。

我试过这种方式但没有工作

$(this).parents().siblings('.value').val(1);

提前致谢！

按上一个复选框更改文本框值

0 个答案: