更新：

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"; }。而您正在这样做：

value

因此，换句话说，您将active设置为checkbox时将unchecked设置为checked，但是应该将该设置与{{1 }}状态等于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；否则可以将其设置为null；

//在视图中

//发布时，您可以检查value是否为1，然后检查是否为null

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

HTML

JS

更新：

HTML

JS

AJAX

2 个答案: