Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
 Аватар для vijer
24 / 22 / 9
Регистрация: 23.09.2014
Сообщений: 326

Динамиччески созданные chekbox и checked

15.11.2016, 09:55. Показов 1038. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Посредствам аякс запроса получаю данные из базы. Одновременно с этим по этим данным создаю таблицу. В которой динамически добавляю CheckBox`ы. Естественно таблица перерисовывается каждый раз как я делаю аякс запрос. Естествено checked на чек боксах слетают. Как сделать так чтоб не слетали?
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
15.11.2016, 09:55
Ответы с готовыми решениями:

Chekbox теряет статус checked при перемещении... Как быть?
У меня есть некий DIV контейнер, содержащий HTML елементы. Елементам присвоены динамически...

Если checked радиокнопка с именем 1, то снять checked с группы 2. Как?
Здравствуйте. Создаю программку на пхп,что-то вроде теста на радио-кнопках Нужно чтобы человек...

Как можно задать checked или что то еще другим значениям на сайте ? А то при использовании checked для дргого
Как можно задать checked или что то еще другим значениям на сайте ? А то при использовании...

4
Ренегат
Эксперт HTML/CSS
 Аватар для BANO
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
15.11.2016, 10:01
vijer, читать предыдущую таблицу и переписывать состояния чекбоксов из неё...
0
 Аватар для vijer
24 / 22 / 9
Регистрация: 23.09.2014
Сообщений: 326
15.11.2016, 10:12  [ТС]
А обращаться как к динамически созданным чек боксам? по ID ? ... ну в принципе если создавать их с разными ID .. типа
JavaScript
1
2
3
4
5
6
var checkbox = document.createElement('input');
                    checkbox.type = "checkbox";
                    checkbox.name = "name";
                    checkbox.value = "value";
                    checkbox.id = "id"+i;
                    td.appendChild(checkbox);
Но стоп. А как мне узнать количество записей тогда в предыдущей таблице?
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
15.11.2016, 10:40
Цитата Сообщение от vijer Посмотреть сообщение
ну в принципе если создавать их с разными ID
А можно как-то по-другому?
0
the hardway first
Эксперт JS
 Аватар для j2FunOnly
2475 / 1847 / 910
Регистрация: 05.06.2015
Сообщений: 3,610
16.11.2016, 10:09
Цитата Сообщение от vijer Посмотреть сообщение
Естественно таблица перерисовывается каждый раз как я делаю аякс запрос. Естествено checked на чек боксах слетают.
Почему естественно? Разве обязательно рисовать всю таблицу каждый раз при добавлении строки?
Можно еще данные хранить не привязывая к DOM, и по этим данным рисовать таблицу.

Не по теме:

Сек, навелосипежу :)



Добавлено через 19 часов 30 минут
Забыл, я ж хотел велосипед свой выложить
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<table class='table' border='1'>
<thead>
  <tr>
    <th>Name</th><th>Checkbox</th>
  </tr>
</thead>
<tbody>
</tbody>
</table>
<button class="addRow">
  Add row
</button>
<script src="app.js" charset="utf-8"></script>
JavaScript
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
'use strict';
 
var Checkbox = function (params) {
  var params = params || {};
  this.name = params.name;
  this.checked = params.checked;
}
 
var CheckboxList = function () {
  var list = {};
 
  this.addCheckbox = function (checkbox) {
    if(list[checkbox.name]) {
      console.log('[WARN]: checkbox with this name already present');
      return;
    }
 
    list[checkbox.name] = checkbox;
  }
 
  this.each = function (block) {
    for(var checkbox in list) {
      if(list[checkbox]) block(list[checkbox]);
    }
  }
}
 
var HTMLFactory = function () {
  this.getElement = function (el, block) {
    var element = document.createElement(el);
    if(typeof block == 'function') block(element);
    return element;
  }
  this.getCheckbox = function (checkbox) {
    return this.getElement('input', function (input) {
      input.type = 'checkbox';
      input.name = checkbox.name;
      input.checked = checkbox.checked;
      input.onchange = function () {
        checkbox.checked = this.checked;
      }
    });
  };
}
 
var CheckboxListView = function (params) {
  var el = document.querySelector(params.selector);
  var list = params.list;
  var factory = params.factory;
 
  this.drawTable = function () {
    var newBody = factory.getElement('tbody');
    list.each(function (checkbox) {
      newBody.appendChild(drawRowFor(checkbox));
    });
    el.replaceChild(newBody, el.tBodies[0]);
  }
 
  var drawRowFor = function (checkbox) {
    return factory.getElement('tr', function (tr) {
      tr.appendChild(factory.getElement('td', function (td) {
        td.textContent = checkbox.name;
      }));
      tr.appendChild(factory.getElement('td', function (td) {
        td.appendChild(factory.getCheckbox(checkbox));
      }));
    });
  }
}
 
var App = function (selector) {
  var list = new CheckboxList();
  var view = new CheckboxListView({
    selector: selector,
    factory: new HTMLFactory(),
    list: list
  });
 
  this.addCheckbox = function (params) {
    list.addCheckbox(params);
    view.drawTable();
  }
}
 
var app = new App('.table');
document.querySelector('.addRow').onclick = function () {
  app.addCheckbox({
    name: prompt('Type new checkbox name', '')
  });
}
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
16.11.2016, 10:09
Помогаю со студенческими работами здесь

Назначение класса ui-chekbox-on(on) вместо класса ui-chekbox-on(off)
На странице спану назначается класс ui-icon-checkbox-off. Мне надо, чтобы назначался класс...

Нужно, чтобы при checkbox.checked=true я мог набирать текст в textbox-е, ну и соответственно при checkbox.checked=false - нет.
есть checkbox и textbox. Нужно, чтобы при checkbox.checked=true я мог набирать текст в textbox-е,...

Не работает повторный checked="checked"
есть список чекбокс у каждого две кнопки - выбрать основной и выбрать дополнительной. function...

ChekBox
Здравствуйте!! Извините если я повторяюсь с темой...у меня такая проблемка. На форме лежат 3...

ChekBox
Помогите пожалуйста! Только начал изучать делфи. Нужно что-бы кнопка была активной если...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Как я обхитрил таблицу Word
Alexander-7 21.03.2026
Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .
Krabik - рыболовный бот для WoW 3.3.5a
AmbA 21.03.2026
без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .
Программный отбор значений справочника
Maks 21.03.2026
Установка программного отбора значений справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .
Переходник USB-CAN-GPIO
Eddy_Em 20.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
Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru