Javascript 选中或取消选中值null

我试图设置复选框的

值

，如果选中，则

值

处于活动状态，但如果未选中，则

值

处于禁用状态

下一个代码适用于文本，选中或取消选中复选框时文本会更改，但未选中复选框时，发布到数据库的值为

null

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

null

---

更新： 根据提供的答案反馈，添加了一个固定版本，包括

AJAX

调用。这只是为了防止有人陷入同样的问题

如果您使用文档底部的示例，您将看到未勾选的复选框没有附加值。您必须手动执行此操作。也许这可以帮助你：

HTML AJAX

$（文档）.ready（函数（）{
$（“.save_main_cat”）。单击（函数（）{
变量数据=$（'.add_main_categories'）。序列化（）；
/*未选中时，此代码将包含复选框的值*/
$（“.add_main_categories输入：复选框：not（：checked）”）。每个（函数（e）{
数据+=“&”+此.name+'=禁用'；
});
$.ajax({
键入：“POST”，
url:“管理/分类/更新/主要分类”，
数据：数据，
成功：函数（）{
$（'#addCat'）.modal（'hide'）；
$（“.add_main_categories”）[0].reset（）；
dttable.destroy（）；
$（文档）.ready（函数（）{
main_cat（），main_cat_option（），dt_tables（）；
});
}
});
});
});

如果我理解正确，问题出在您的

单击处理程序上。当您通过单击
取消选中
复选框时，当您在
单击
处理程序中观察到
选中的
属性时，该属性将为
false
。你正在这样做：

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

因此，换句话说，当
复选框
未选中时，您将
值设置为
活动
，但相反，该设置应与
已选中
状态相关联，等于
真
。我相信你正在寻找这样的东西：


功能类别检查（）
{
var checkBox=document.getElementById（'checkBox'）；
var text=document.getElementById（'text'）；
如果（checkBox.checked==true）
{
text.style.display=“inline”；
checkBox.value=“活动”；
}
其他的
{
text.style.display=“无”；
checkBox.value=“禁用”；
}
console.log（checkBox.value）；
}
.as控制台{背景色：黑色！重要；颜色：石灰；}

活动的
您可以设置值1，就好像它被选中一样，然后值1可以被选中，否则可以被选中为空或不为空

//鉴于

//在post时间，您可以检查值是否为1，然后选中，否则为空。1） 不要将ID命名为与元素相同的名称。通常您的
姓名
和
id
是相同的。2） 您已经有了一个用于
复选框的变量。没有理由在
if/else
语句中再次获取它。使用变量。3） 您正在切换
true/false
值。如果
false
（未选中），则该值现在为“活动”。它应该被切换。4） 
display:Active
不是有效的样式，但是如果我发布，数据仍然是空的，结果是->插入到
tb_类别中（
cat_name
，
cat_dateinput
，
cat_userinput
）值（'Test reach'，2019-05-08 10:46:10'，diaz'，null）我用AJAX来post@dmforaname你能在问题中包含你用来发布数据的代码吗？可能您没有正确获取复选框的
值
属性。@dmforaname Ok，现在在执行
var data=$（'.add_main_categories'）.serialize（）之后检查
console.log（data）
的输出内容当选中<代码>复选框<代码>且未选中<代码>时
禁用->cat_name=post%20test&username=diaz&csrf_dm_name=12B35181F1A2B7D029B39B69043972启用->cat_name=post%20test&username=diaz&csrf_dm_name=12B35181F1A2B7D029B39B69043972&cat_状态=激活
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";
    }
}

<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>

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";
    }
}

$(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();
                });
            }
        });
    });
});

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