Добрый вечер! Есть такая структура:
...
<td><div data-js_control="{'missed':true}"></div></td>
<td<input name="active" type="checkbox">применить</td>
...
Как сделать, чтобы при изменении чекбокса добавлялось/удалялось значение в json, который находится в data-js_control Т.е. нажимаю чек и data-js_control={'missed':true,'where':'active'}. Изменяю значение чекбокса и обратно возвращается data-js_control={'missed':true}. При до загрузки страницы я не знаю какой будет параметр изначально data-js_control, но знаю какой добавлять
document.getElementById('cb').addEventListener('change', function() {
let div = document.getElementById('someId');
// получаем значение с атрибута и парсим его в обьект
let jsonObj = JSON.parse(div.getAttribute('data-js_control'));
// изменяем нужное нам свойство в зависимости от значения чекбокса
jsonObj.where = this.checked ? 'active' : undefined;
// приводим наш обьект в JSON и записываем его в атрибут
div.setAttribute('data-js_control', JSON.stringify(jsonObj));
console.log('new value : ', div.getAttribute('data-js_control'));
});
<div id="someId" data-js_control='{"missed":"true"}'></div>
<input id="cb" name="active" type="checkbox"><label for="cb">применить</label>
Сборка персонального компьютера от Artline: умный выбор для современных пользователей