Скрыть результат аякс запроса
 

Привет.

<input onclick="SelectCtype(this)" name="ctype-check" value="id" type="checkbox" />
<div id="id"><label>Text</label></div>

function SelectCtype(e) {

    var inp = document.querySelector("input[name='ctype-check']:checked");
    var container = document.getElementById(inp.value);
    var div = document.createElement("div");
    div.className = 'custom-control custom-checkbox mb-1';
    var lab = document.createElement("label");
    lab.className = 'field-label';
    div.appendChild(lab);
    container.appendChild(div);

    if ($(e).is(':checked')){
 
    $.ajax({
        type: 'POST',
        url: '',
        data: {
            'ctype_id': e.value
        },
        success: function (data) {
            var obj = JSON.parse(data);
            $('.field-label').html(obj);

        }
    });
}else{
    
    alert()
}
}

Если снимаю галочку с чекбокса,нужно скрыть результат аякса. А так у меня даже alert() не работает. Help!

И ни одного сообщения в консоле?

При первом клике галочка появится.
При втором клике галочка уберется и inp будет null

Всё так и есть.inp null, а реакции никакой. В консоле показывает, красным,что inp null)

Я подозреваю,что у меня проблемы с выводом аякса. У меня чекбоксов

<input onclick="SelectCtype(this)" name="ctype-check" value="id" type="checkbox" />
<div id="id"><label>Text</label></div>

несколько. Это список категорий. Мне надо, что бы при выборе одной открывались её подкатегории. А у меня,если я кликаю на первой, выводит под ней,как и надо,но потом,если кликаю по второй, выводит под первой в двух экземплярах. Получается создаётся блок для вывода не под тем,гле я кликнул, о там,,где :checked

Если везде name="ctype-check", то всегда будет находить первый отмеченный
Если отмеченных нет, то всегда будет inp = null

Зачем вообще
var inp = document.querySelector("input[name='ctype-check']:checked");

У вас же e - тот input, по которому кликнули.
Ну и проверяйте сразу

if (e.checked) {
// показываем
} else {
// скрываем
}

Разобрался. Немного переделал. Не стал мудрить с созданием блоков.

<input onchange="SelectCtype(id,id_in)" name="ctype-check" value="1" id="id" type="checkbox" />
<div id=""><label>Text</label></div>
<div id = id_in" style = "display: none;"></div>

function SelectCtype(id,div_id) {

inp = document.getElementById(id);
div = document.getElementById(div_id);
if (inp.checked){
...
success: function (data) {
..
div.style.display = "block";
}
..

}else{
div.style.display = "none";
}

}

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

Но это наверное вопрос к серверу. Буду там смотреть

Приведите код, где у Вас несколько таких инпутов
и весь код скрипта, где они появляются/скрываются.

Попробую.

А чего тут пробовать?
Просто код с последвательностью инпутов
и код SelectCtype

Отключил в коде аякс запрос и выводил просто текст.Всё работает корректно. Не знаю что в аяксе не так. Но ошибка точно на стороне клиента. Так как клик по чекбоксу не срабатывает вниз по дереву.
Вот код

А как это должно работать в том коде, который вы привели?

$.ajax({
        type: 'POST',
        url: '',
        data: {
            'ctype_id': id
        },
        success: function (data) {
            if (typeof data === "string" && data !== null) {
            var obj = JSON.parse(data); 
            div.style.display = "block";          
            $(div).html(obj);   
            }       
        }
    });

url: ''
Как вы вообще собираетесь посылать запрос к своему серверу из jsfiddle.net/?

Никак.Вы просили код с последвательностью инпутов. А тут сполера не нашёл. Вот и выложил там

Значит надо смотреть, что сервер возвращает, срабатывает ли success: вообще

Нет. Дело в том, что при клике на чекбокс вниз по списку запрос не уходит вообще.

Методом исключения выяснид, что дело в этой строке
$(div).html(JSON.parse(data));
Если её коментирую,то запросы отправляются(и возвращаются) и вверх и вниз

Сделал так

if (inp.checked){
    div.style.display = "block";   
}else{
    
    div.style.display = "none";
}

    $.ajax({
        type: 'POST',
        url: '',
        dataType:'json',
        data: {
            'ctype_id': id
        },
        success: function (data) {                            
            $(div).html(data);                  
        }
    });

Теперь запросы уходят и приходт,но вниз не выводятся)

Нашёл закономерность. Скорее всего дело в id. У меня 8 категорий.До пятой,она имеет id=9 всё работает и вверх и внз. Но только с 1-ой по 5-тую. И тоже самое с 6-ой по восьмую. Там id начинается с 10.

Поменял айдишники с цифровых на буквенно-цифровые и всё заработало.