javascript - 复选框选中或取消选中值 null

Question

我正在尝试设置复选框的 value，如果选中 value 是 active，但如果未选中 值 被禁用。

下一个代码适用于文本，选中或取消选中复选框时文本会发生变化，但是当取消选中复选框时，发布到数据库的值为 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";
    }
}

我希望当复选框未选中时，发布到数据库的值将被禁用，但当前得到一个null。

---

更新:

添加了一个固定版本，包括基于提供的答案反馈的 AJAX 调用。这是为了防止有人陷入同样的​​问题。

If you play with the example on the bottom of serialize() documentation you will see that value is not appended for checkboxs that are uncheked. You will have to do it manually. Maybe this can help you: how can I override jquery's .serialize to include unchecked checkboxes

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属性(property)将是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') .