Форум

dpts · #1 (**permalink**) 12.05.2015, 14:24

Имеем несколько "смысловых" групп. Каждая состоит из одного 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?

рони · #2 (**permalink**) 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 · #3 (**permalink**) 12.05.2015, 15:12

Спасибо. Работает.

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

рони · #4 (**permalink**) 12.05.2015, 15:39

dpts,

Сообщение от рони

this.checked && $(this).nextUntil(s).val(1);

заменить на

$(this).nextUntil(s).val(+this.checked);

dpts · #5 (**permalink**) 12.05.2015, 15:42

Благодарю.

dpts · #6 (**permalink**) 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>

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

рони · #7 (**permalink**) 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 · #8 (**permalink**) 12.05.2015, 18:36

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

Форум

Справочник

Discord чат

Курсы javascript