Поменять несколько значений в input type="text"
Имеем несколько "смысловых" групп. Каждая состоит из одного checkbox и нескольких input type="text".
<input type="checkbox" id="c1"> <input type="text" id="t1" value=""> <input type="text" id="t2" value=""> <input type="text" id="t3" value=""> <input type="text" id="t4" value=""> <input type="checkbox" id="c2"> <input type="text" id="t5" value=""> <input type="text" id="t6" value=""> <input type="checkbox" id="c3"> <input type="text" id="t7" value=""> <input type="text" id="t8" value=""> <input type="text" id="t9" value=""> Как сделать, чтобы при включении чекбокса, свойства value всех текстовых полей в "группе" выставлялось в 1? |
dpts,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var s = $("input:checkbox");
s.click(function() {
this.checked && $(this).nextUntil(s).val(1);
});
});
</script>
</head>
<body>
<input type="checkbox" id="c1" >
<input type="text" id="t1" value="">
<input type="text" id="t2" value="">
<input type="text" id="t3" value="">
<input type="text" id="t4" value="">
<input type="checkbox" id="c2">
<input type="text" id="t5" value="">
<input type="text" id="t6" value="">
<input type="checkbox" id="c3">
<input type="text" id="t7" value="">
<input type="text" id="t8" value="">
<input type="text" id="t9" value="">
</body>
</html>
|
Спасибо за оперативный ответ
Спасибо. Работает.
А как теперь сбросить value в 0 если checkbox выключить? |
dpts,
:-? Цитата:
$(this).nextUntil(s).val(+this.checked); |
Огромнейшее спасибо
Благодарю.
|
А если усложнить верстку - не работает
Если верстка, как в предыдущем примере, то все отлично работает.
Но стоит начать заворачивать чекбоксы и поля ввода в таблицы, работать перестает.
<html>
<head>
<meta http-equiv="Content-Type" content="number/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<title>Чекбоксы</title>
<script>
$(function(){
var s = $("input:checkbox");
s.click(function() {
this.checked && $(this).nextUntil(s).val(1);
});
});
$(function(){
var s = $("input:checkbox");
s.click(function() {
$(this).nextUntil(s).val(+this.checked);
});
});
</script>
</head>
<body>
<div id="d1">
<table id="td11">
<tr>
<td><input type="checkbox" id="c1" ><td>
</tr>
</table>
<table id="td12">
<tr>
<td><input type="text" id="t1" value="0"></td>
</tr>
<tr>
<td><input type="text" id="t2" value="0"></td>
</tr>
<tr>
<td><input type="text" id="t3" value="0"></td>
</tr>
<tr>
<td><input type="text" id="t4" value="0"></td>
</tr>
</table>
</div>
<div id="d2">
<table id="td21">
<tr>
<td><input type="checkbox" id="c2" ><td>
</tr>
</table>
<table id="td22">
<tr>
<td><input type="text" id="t5" value="0"></td>
</tr>
<tr>
<td><input type="text" id="t6" value="0"></td>
</tr>
</table>
</div>
<div id="d3">
<table id="td31">
<tr>
<td><input type="checkbox" id="c3" ><td>
</tr>
</table>
<table id="td32">
<tr>
<td><input type="text" id="t7" value="0"></td>
</tr>
<tr>
<td><input type="text" id="t8" value="0"></td>
</tr>
</table>
</div>
</body>
</html>
Как исправить? |
dpts,
добавлен класс check -- если не подходит класс перечислите id нужных div $("#d1, #d2, #d3")
<html>
<head>
<meta http-equiv="Content-Type" content="number/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<title>Чекбоксы</title>
<script>
$(function() {
$(".check").each(function(d, a) {
var b = $("input:checkbox", a),
c = $("input:text", a);
b.click(function() {
c.val(+this.checked)
})
})
});
</script>
</head>
<body>
<div id="d1" class="check">
<table id="td11">
<tr>
<td><input type="checkbox" id="c1" ></td>
</tr>
</table>
<table id="td12">
<tr>
<td><input type="text" id="t1" value="0"></td>
</tr>
<tr>
<td><input type="text" id="t2" value="0"></td>
</tr>
<tr>
<td><input type="text" id="t3" value="0"></td>
</tr>
<tr>
<td><input type="text" id="t4" value="0"></td>
</tr>
</table>
</div>
<div id="d2" class="check">
<table id="td21">
<tr>
<td><input type="checkbox" id="c2" ></td>
</tr>
</table>
<table id="td22">
<tr>
<td><input type="text" id="t5" value="0"></td>
</tr>
<tr>
<td><input type="text" id="t6" value="0"></td>
</tr>
</table>
</div>
<div id="d3" class="check">
<table id="td31">
<tr>
<td><input type="checkbox" id="c3" ></td>
</tr>
</table>
<table id="td32">
<tr>
<td><input type="text" id="t7" value="0"></td>
</tr>
<tr>
<td><input type="text" id="t8" value="0"></td>
</tr>
</table>
</div>
</body>
</html>
|
Благодарю, работает.
|
| Часовой пояс GMT +3, время: 15:33. |