Флажок отметьте или снимите отметку со значения null

Question

Я пытаюсь установить флажок value, если установлен флажок, value равен active, но если не отмечен, value равен disabled.

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

HTML

<input type="checkbox" name="cat_status" class="inline checkbox" id="checkbox" checked value="active" onclick="cat_check()">
<label id="text" style="display:Active">Active</label>

JS

function cat_check() {

    var checkBox = document.getElementById('checkbox');
    var text = document.getElementById('text');

    if (checkBox.checked == false) {
        text.style.display = "inline";
        document.getElementById('checkbox').value = "active";
    } else {
        text.style.display = "none";
        document.getElementById('checkbox').value = "disable";
    }
}

Я ожидаю, что значение, отправленное в базу данных, будет disabled, когда флажок снят, но в настоящее время он получает null.

---

Обновление:

Добавлена ​​исправленная версия, включающая вызов AJAX, основанный на предоставленной обратной связи ответов.Это на всякий случай, если кто-то попадет в ту же проблему.

Если вы поиграете с примером в нижней части документации serialize () , вы увидите, что значение не добавляется дляфлажки, которые не отмечены.Вам придется сделать это вручную.Может быть, это может помочь вам: как я могу переопределить jseery .serialize, чтобы включить непроверенные флажки

HTML

<form method="post" class="add_sub_categories">
  <input type="checkbox" name="cat_status" class="inline checkbox" id="checkbox" checked value="active" onclick="cat_check()">
  <label id="text" style="display:Active">Active</label>
  <a class="btn btn-xs btn-info save_main_cat">GO!</a>
</form>

JS

function cat_check() {

    var checkBox = document.getElementById('checkbox');
    var text = document.getElementById('text');

    if (checkBox.checked == true) {
        text.style.display = "inline";
    } else {
        text.style.display = "none";
    }
}

AJAX

$(document).ready(function() {

    $(".save_main_cat").click(function() {

        var data = $('.add_main_categories').serialize();

        /* This code will include the value for the checkbox when unchecked */
        $(".add_main_categories input:checkbox:not(:checked)").each(function(e) {
            data += "&"+this.name+'=disable';
        });

        $.ajax({
            type: 'POST',
            url: "<?= base_url() ?>admin_ajx/categories_ajx/update_main_categories",
            data: data,
            success: function() {                                                            

                $('#addCat').modal('hide');
                $(".add_main_categories")[0].reset();

                dttable.destroy();

                $(document).ready(function() {
                    main_cat(), main_cat_option(), dt_tables();
                });
            }
        });
    });
});

Answer 1

Если я правильно понял, проблема в вашем click обработчике.Когда вы unchek checkbox нажимаете на него, свойство checked будет false, если вы наблюдаете его внутри обработчика click.И вы делаете это:

 if (checkBox.checked == false)
 {
     text.style.display = "inline";
     document.getElementById('checkbox').value = "active";
 }

Итак, другими словами, вы устанавливаете value на active, когда checkbox равен unchecked, но вместо этого этот параметр должен быть связандо checked состояния, равного true.Я считаю, что вы ищете что-то вроде этого:

function cat_check()
{
    var checkBox = document.getElementById('checkbox');
    var text = document.getElementById('text');

    if (checkBox.checked === true)
    {
        text.style.display = "inline";
        checkBox.value = "active";
    }
    else
    {
        text.style.display = "none";
        checkBox.value = "disable";
    }
    
    console.log(checkBox.value);
}

.as-console {background-color:black !important; color:lime;}

<input type="checkbox" name="cat_status" class="inline checkbox" id="checkbox" checked value="active" onclick="cat_check()">
<label id="text" style="display:inline">Active</label>

В коде также есть другие исправления:

A) Начальная display:Active - этонедопустимая конфигурация CSS в отношении <label id="text" style="display:Active">Active</label>.Поэтому я изменил его на display:inline.

B) Используйте уже определенную переменную checkBox внутри обработчика click вместо нескольких вызовов document.getElementById('checkbox').

Answer 2

Вы можете установить значение 1, как если бы оно было проверено, тогда значения сообщений 1 в противном случае могут быть проверены на ноль или нет;

// В поле зрения

// Во время публикации вы можете проверить,значение равно 1, затем проверяется в противном случае ноль