Chekbox теряет статус checked при перемещении... Как быть?

22.07.2010, 15:37. **Показов** 1407. **Ответов** 7

Студворк — интернет-сервис помощи студентам

У меня есть некий DIV контейнер, содержащий HTML елементы.
Елементам присвоены динамически аттрибуты, свойства, методы.
Нужно переместить контейнер в другое место.
Перенос innerHTML не годится, так как при этом теряются динамически присвоенные елементам методы.
Выполняю removeChild b appendChild в другое место... Все работает отлично, все методы и свойства переносятся вместе с объектом.

Проблема возникает с чекбоксами...
При переносе чекбоксы меняют свойство checked на изначальное...

Вот пример:

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<script>
function move(){
var obj=c1;
if (obj.parentElement==d1) {
d1.removeChild(obj);
d2.appendChild(obj);
} else {
d2.removeChild(obj);
d1.appendChild(obj);
}
}
</script>
<body ondblclick=alert(this.innerHTML)>
    <div id=d1 style='border:3 inset; width:200; height:100;'>
        <div id=c1>
            <input  type=checkbox><input>
        </div>
    </div>
    
    <input type=button value=Move onclick=move()>
    
    <div id=d2 style='border:3 inset; width:200; height:100;'>
    </div>
</body>
</html>

DIV c1 при нажатии на кнопку перемещается из одного контейнера в другой...
При этом, если checked чекбокса изменен, при переносе он восстановит свое состояние на первоначальное...

Как быть?

@Bl@ze · 22.07.2010, 16:20

Первое что пришло в голову

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<script>
function move()
{
var obj=c1;
var i=0;
if (obj.parentElement==d1) 
{
if (box.checked==true) i=1;
d1.removeChild(obj);
d2.appendChild(obj);
if (i==1) box.checked=true;
} else {
if (box.checked==true) i=1;
d2.removeChild(obj);
d1.appendChild(obj);
if (i==1) box.checked=true;
}}
</script>
<body>  
<div id=d1 style='border:3 inset; width:200; height:100;'>
        <div id=c1> 
        <input type=checkbox id='box'>
    <input> 
    </div>
    </div>  
    <input type=button value=Move onclick=move()>   
    <div id=d2 style='border:3 inset; width:200; height:100;'>  
</div>
</body>
</html>

22.07.2010, 17:11

Не пойдет...
Чекбоксы создаются динамически в ячейках таблицы, записей в которой может быть довольно много...
Городить циклы, которые будут создавать массив значений всех чекбоксов, не очень то красиво...
Да и тормозит это сильно.

Можете взглянуть как тормозит изменение статуса тысячи строк:

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<script>
function toggle_all(x){
var coll = document.all.tags('INPUT');
if (coll!=null) {for (i=0; i<coll.length; i++) coll[i].checked=x.checked;}
}
</script>
<body>
<input type=checkbox onclick=toggle_all(this)>Check/Uncheck all
 
 
<script>
for (i=0; i<1000; i++) document.write('<input type=checkbox><input type=checkbox><input type=checkbox>
');
</script>
</body>
</html>

22.07.2010, 18:57

перемести имеющийся контенер, а вместо него создай новый с начальными установками.

23.07.2010, 07:11

Какая разница?
При перемещении контейнера в DOM с чекбоксом будет происходить то-же самое...
Да и создание нового не подходит по той причине, что я не собираюсь перемещать все содержимое...
Только отдельные элементы...

@sergyu · 26.07.2010, 15:04

Попробуй через cloneNode

26.07.2010, 16:11

cloneNode не подойдет...
Мне нужно работать с тем-же самым экземпляром объекта...

@sergyu · 26.07.2010, 17:36

попробывал... натуральный глюк.
по моему просто при копировании делаеш:
for(...)
if(node.getAttribute('checked'))
{
var a = document.getElementById('targetNode').ap pendChild(node);
a.checked = true;
}else document.getElementById('targetNode').ap pendChild(node);

ps. при appendNode не надо делать removeNode потому што appendNode = операции CUT.

Новые блоги и статьи Все статьи Все блоги /
Переходник USB-CAN-GPIO Eddy_Em 19.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .

evge
	22.07.2010, 18:57
	перемести имеющийся контенер, а вместо него создай новый с начальными установками.

Maksim
	23.07.2010, 07:11
	Какая разница? При перемещении контейнера в DOM с чекбоксом будет происходить то-же самое... Да и создание нового не подходит по той причине, что я не собираюсь перемещать все содержимое... Только отдельные элементы...

@sergyu 0 / 0 / 0 Регистрация: 29.07.2008 Сообщений: 90
	26.07.2010, 15:04
	Попробуй через cloneNode 0

Maksim
	26.07.2010, 16:11
	cloneNode не подойдет... Мне нужно работать с тем-же самым экземпляром объекта...

@sergyu 0 / 0 / 0 Регистрация: 29.07.2008 Сообщений: 90
	26.07.2010, 17:36
	попробывал... натуральный глюк. по моему просто при копировании делаеш: for(...) if(node.getAttribute('checked')) { var a = document.getElementById('targetNode').ap pendChild(node); a.checked = true; }else document.getElementById('targetNode').ap pendChild(node); ps. при appendNode не надо делать removeNode потому што appendNode = операции CUT. 0