Форум

jorik · #1 (**permalink**) 03.03.2013, 01:51

Привествую javascript гуру

Пишу несколько не простую форму регистрации для своего сайта, сам пишу на php, но вот для части формы необходимо сделать несколько "фич", которые под силу только javascript (так чтоб без изврата). Суть такова:

<html> 
<head> 
  <title></title> 
</head> 
<body> 
<form name='form' action='' method='post'> 
<pre> 
	  Не заполнять <input type='checkbox' name='sel_all'> 
		Вариант 1 <input id='items_1' type='checkbox'>  <input type='text'>
		Вариант 2 <input id='items_2' type='checkbox'>  <input type='text'>
		Вариант 3 <input id='items_3' type='checkbox'>  <input type='text'>
		Тоже не заполнять <input type='checkbox' name='sel_all'>
			Вариант 1.1 <input id='items_1' type='checkbox'>  <input type='text'>
			Вариант 2.1 <input id='items_2' type='checkbox'>  <input type='text'>
			Вариант 3.1 <input id='items_3' type='checkbox'>  <input type='text'>
</pre> 
</form> 
</body> 
</html>

Когда стоит галочка "Не заполнять", все остальные чекбоксы должны быть отмечены + все поля заблокированы для ввода+все, что ниже этого чебокса спрятано, вроде как так

function collapsElement(id) {
    if ( document.getElementById(id).style.display != "none" ) {
        document.getElementById(id).style.display = 'none';
    }
    else {
        document.getElementById(id).style.display = '';
    }
}

Для поля "Тоже не заполнять" все тоже самое, но действовать должно только на элементы, которые ниже него. Таких блоков на странице будет несколько и они должны быть независимы.
Нашел множество способов как можно это реализовать по отдельности (блокировка поле, выбрать все чекбоксы итд.) и вроде понятно как это работает, но все это в кучу склеить не выходит. Очень надеюсь на Вашу помощь т.к. с javascript у меня беда.

danik.js · #2 (**permalink**) 03.03.2013, 04:02

<script>
    function toggleGroup(groupId, hide) {
       var group = document.getElementById(groupId);
       group.style.display = hide ? 'none' : 'block';
    }
</script>
<label>Не заполнять <input type='checkbox' name='sel_all' onchange="toggleGroup('extra1', checked)"></label>
<fieldset id="extra1">
    Вариант 1 <input id='items_1' type='checkbox'>  <input type='text'>
    Вариант 2 <input id='items_2' type='checkbox'>  <input type='text'>
    Вариант 3 <input id='items_3' type='checkbox'>  <input type='text'>
</fieldset>
<label>Тоже не заполнять <input type='checkbox' name='sel_all' onchange="toggleGroup('extra2', checked)"></label>
<fieldset id="extra2">
    Вариант 1.1 <input id='items_1' type='checkbox'>  <input type='text'>
    Вариант 2.1 <input id='items_2' type='checkbox'>  <input type='text'>
    Вариант 3.1 <input id='items_3' type='checkbox'>  <input type='text'>
</fieldset>

Deff · #3 (**permalink**) 03.03.2013, 04:20

jorik,
Ну в принципе на странице много форм удобно пользовать jQuery

<html> 
<head> 
 <title>
</title> 
<script src="http://code.jquery.com/jquery-latest.js"></script>

</head> 
<body> 
<form id='formNN' name='form' action='' method='post'> 
<pre> 
	  <span class='tree all'>Не заполнять <input type='checkbox' name='sel_all'></span>
		<span class='tree'>Вариант 1 <input id='items_1' type='checkbox'>  <input type='text'></span>
		<span class='tree'>Вариант 2 <input id='items_2' type='checkbox'>  <input type='text'></span>
		<span class='tree'>Вариант 3 <input id='items_3' type='checkbox'>  <input type='text'></span>
		<span class='tree all'>Тоже не заполнять <input type='checkbox' name='sel_all'></span>
			<span class='tree'>Вариант 1.1 <input id='items_1' type='checkbox'>  <input type='text'></span>
			<span class='tree'>Вариант 2.1 <input id='items_2' type='checkbox'>  <input type='text'></span>
			<span class='tree'>Вариант 3.1 <input id='items_3' type='checkbox'>  <input type='text'></span>
</pre> 
</form>
<script>
$(document).ready(function(){
  var form = $('#formNN');
  var treeChecks = $('pre span.tree',form);
  var length = treeChecks.length;

  $('pre span.tree.all input[type="checkbox"]',form) .change(function(){
       var sw = !this.checked;
       var ThInd = treeChecks.index($(this).parent()[0]);
       for(var i=ThInd+1;i<length; i++) {
            $(treeChecks[i]).toggle(sw);
       }
  });
});
</script>
</body> 
</html>

Cобственно плагин не доведен, поскольку не понятно, что с чекитами , которые не name='sel_all',
Они участвуют в этой постановке ?

danik.js · #4 (**permalink**) 03.03.2013, 04:29

Ну да. Кому-то достаточно 4 строчки кода, что составит 150 байт (в несжатом виде) чтобы решить эту задачу, а кому-то нужно 10000 строк кода что составляет 90 килобайт + еще 12 строк кода.

Deff · #5 (**permalink**) 03.03.2013, 04:34

danik.js,
Знаем мы эти две строчки на реальной задаче, могу спорить, что твой Вариант не подойдёт...Было уже на днях с подобной задачей...
Потом чел уточнил - что каждый чекбокс 1 = должен скрывать подгруппу 1.1

danik.js · #6 (**permalink**) 03.03.2013, 04:44

Ну хорошо, плюс еще одна строчка для подключения костыля для старых ишаков, эмуляция querySelector. Согласись это ничто по сравнению с 10000 строк кода jQuery

danik.js · #7 (**permalink**) 03.03.2013, 04:46

Сейчас мозг у всех превратился в плагин для jQuery. Все "мастерски" владеют jQuery, и даже не подозревают как сделать тоже самое, но без подключения лишних 10000 строк кода.

danik.js · #8 (**permalink**) 03.03.2013, 04:48

Вобще, если сайт делается на заказ и за копейки, то jQuery тут - самое оно. Не нужно себя утруждать ничем. Если же сайт для себя - я бы постарался сделать его максимально качественным, и врядли бы подключал jQuery всего лишь ради скрытия полей формы.

Deff · #9 (**permalink**) 03.03.2013, 04:49

danik.js,
Во первых схема неверна - первый чек - отключает - обе строки
Во вторых - я решаю задачи которые имеют интерес и для меня, у меня на сервисе jquery подключена на всех страницах,
А на сколько это решение устроит ТС - ему решать

danik.js · #10 (**permalink**) 03.03.2013, 05:00

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

ThInd

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

sw

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

formNN

Ты подрабатыавешь обфускатором? Ну ладно свой код запутывать, но ведь автор вопроса не разберется в этих всяких sw или ThInd'ах ...
Неужели нельзя дать нормальные понятные имена, а не шифровать. Ты бы еще так писал:

var a = $('#formNN');
var b = $('pre span.tree',a);
var c = b.length;

$('pre span.tree.all input[type="checkbox"]',a) .change(function(){
   var d = !this.checked;
   var e = b.index($(this).parent()[0]);
   for(var i=e+1;i<c; i++) {
        $(b[i]).toggle(d);
   }
});

Форум

Справочник

Discord чат

Курсы javascript