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

22.07.2010, 15:37. **Показов** 1413. **Ответов** 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.

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

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

Опции темы