复选框选中或取消选中的值是空。

Question

复选框选中或取消选中的值是空。

3

我试图设置复选框的value，如果选中，value是active，但如果未选中，则为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();
                });
            }
        });
    });
});

- dmforaname

很多问题。1）不要用相同的名称来命名您的ID和元素。通常情况下，name和id是相同的。2）您已经有了一个变量checkBox。在 if/else语句中没有理由再次获取它。使用该变量即可。3）您正在切换true/false值。如果为 false（未选中），则该值现在为“active”。应进行切换。4）display：Active不是有效的样式。 - Rob Scott

2个回答

0

您可以将值设置为1，如果它被选中，则值为1，否则可以选中null或未选中;

// 在视图中

//在发布时间，您可以检查值是否为1，然后选中否则为空

- PHP Geek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shidersz · Accepted Answer

如果我理解正确的话，问题出在你的点击事件处理程序上。当你通过点击复选框来取消勾选时，在点击处理程序内部观察到的checked属性将为false。而你正在做这件事：Original Answer翻译成"最初的回答"。

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

换句话说，当复选框未被选中时，您将“value”设置为“active”，但实际上，该设置应与状态为“true”的“checked”相关联。我认为您正在寻找类似于以下内容：

if (checkbox.checked) {<br>    value = 'active';<br>} else {<br>    value = 'inactive';<br>}

最初的回答：

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

注：Original Answer的意思是“最初的回答”。