Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Поменять несколько значений в input type="text" (https://javascript.ru/forum/css-html/55738-pomenyat-neskolko-znachenijj-v-input-type%3D-text.html)

dpts 12.05.2015 14:24

Поменять несколько значений в 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?

рони 12.05.2015 14:51

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>

dpts 12.05.2015 15:12

Спасибо за оперативный ответ
 
Спасибо. Работает.

А как теперь сбросить value в 0 если checkbox выключить?

рони 12.05.2015 15:39

dpts,
:-?
Цитата:

Сообщение от рони
this.checked && $(this).nextUntil(s).val(1);

заменить на
$(this).nextUntil(s).val(+this.checked);

dpts 12.05.2015 15:42

Огромнейшее спасибо
 
Благодарю.

dpts 12.05.2015 17:37

А если усложнить верстку - не работает
 
Если верстка, как в предыдущем примере, то все отлично работает.
Но стоит начать заворачивать чекбоксы и поля ввода в таблицы, работать перестает.
<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>


Как исправить?

рони 12.05.2015 17:55

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>

dpts 12.05.2015 18:36

Благодарю, работает.


Часовой пояс GMT +3, время: 06:10.