2
изменить значение текстового поля с помощью предыдущего флажка
<!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);
Спасибо заранее!
эй, это работает отлично –