复选框选中或取消选中值 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() 文档底部的示例，您将看到未选中的复选框未附加该值。您将不得不手动进行。也许这可以帮助你：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 属性将是 false，当您在 click 处理程序中观察它时。而你正在这样做：

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

因此，换句话说，当checkbox 为unchecked 时，您将value 设置为active，但相反，该设置应与等于true 的checked 状态相关联。我相信您正在寻找这样的东西：

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 不是参考 <label id="text" style="display:Active">Active</label> 的有效 CSS 配置。所以我把它改成了display:inline。

B) 在click 处理程序中使用已经定义的变量checkBox，而不是多次调用document.getElementById('checkbox')。

Answer 2

你可以设置 value 1 ，如果它被检查然后 value 发布 1 否则可以检查 null 或不;

// 在视图中

//在post time你可以检查value是否为1，否则检查为null