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

时间:2019-05-08 02:55:07

标签: javascript jquery ajax codeigniter checkbox

我尝试设置复选框的value,如果选中valueactive,但是如果未选中valuedisabled

下一个代码适用于文本,当复选框处于选中状态或未选中状态时,文本会更改,但复选框处于未选中状态时,发布到数据库的值为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();
                });
            }
        });
    });
});

2 个答案:

答案 0 :(得分:2)

如果我理解正确,则问题出在您的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')

答案 1 :(得分:1)

您可以将值1设置为好像已选中,然后将值过帐1;否则可以将其设置为null;

//在视图中

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