时间戳

首页 > 解决方案 > 复选框选中或取消选中值 null

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

问题描述

我正在尝试设置value一个复选框，如果选中valueis active，但如果未选中valueis 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()文档底部的示例，您将看到未选中的复选框未附加该值。您将不得不手动进行。也许这可以帮助你：我如何覆盖 jquery 的 .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();
                });
            }
        });
    });
});

标签： javascriptjqueryajaxcodeignitercheckbox

解决方案

如果我理解正确，则问题出在您的click处理程序上。当您单击它时，该unchek属性将在您在处理程序中观察它时出现。你正在这样做：checkboxcheckedfalseclick

 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').

推荐阅读