Question

我开发了一个3状态复选框，允许我发送3个不同的值。以下是我为复选框设置的值。

State 0 [] = Uncheck (Value = 0)

State 1 [x] = Checked (Value = 1)

State 2 [-] = Indeterminate (Value = 2)

现在问题出在通过POST方法发送值时。由于取消选中Uncheck和Indeterminate，因此不会发送值，并且在状态0或状态2上数据库中的值为0.

这是复选框的逻辑脚本：

<script>

window.onload = function () 
{
    setCheckBoxes(document.getElementById('LEVL1LES1'));
}

function setCheckBoxes(cb) {

    if (cb.value == 0)
    {
        cb.checked = false;
    }
    else if (cb.value == 1)
    {
        cb.checked = true;
    }
    else
    {
        cb.indeterminate=true;
    }
 }

function changeBoxValues(cb) {
    if (cb.value == 0)
    {
        cb.value = 1;
        setCheckBoxes(cb);
    }
    else if (cb.value == 1)
    {
        cb.value = 2;
        setCheckBoxes(cb);
    }
    else
    { 
        cb.value = 0;
        setCheckBoxes(cb);
    }
 }

和HTML：

<input type="checkbox" name="LEVL1LES1" value='<?php echo $row["LEVL1LES1"]?>' id="LEVL1LES1" onclick="changeBoxValues(this)">

任何人都可以给我任何关于如何解决这个问题的输入，因为我知道我正在尝试将解决方法作为默认行为哦复选框？

PS。您可能会问为什么我不使用其他选项，如下拉列表？原因如下：

谢谢！

Answer 1

如果您以经典形式执行此操作并且始终希望获得值，则相当标准的方法是不要发送复选框的值;相反，有一个隐藏的表单字段，其中包含您要发送的值。

<input type="checkbox" id="LEVL1LES1" onclick="changeBoxValues(this)">
<input type="hidden" name="LEVL1LES1" value='<?php echo $row["LEVL1LES1"]?>'>

请注意，该复选框没有name，因此在提交时不会包含在表单中。另请注意，hidden字段的name与复选框的id相匹配。我在下面的changeBoxValues中使用它来关联这两个字段，但这只是一种方法;另一个是data-*属性，甚至只是cb.nextElementSibling，并确保隐藏字段始终是复选框元素之后的下一个元素。

然后在changeBoxValues：

function changeBoxValues(cb) {
    var hidden = document.querySelector('[name="' + cb.id + '"]');
    if (hidden.value == 0)
    {
        hidden.value = 1;
    }
    else if (hidden.value == 1)
    {
        hidden.value = 2;
    }
    else
    { 
        counter = 0; // ?? Where did counter come from??
        hidden.value = counter;
    }
    setCheckBoxes(cb, hidden.value);
}

...而setCheckBoxes使用传入的值而不是cb.value来确定要设置的状态：

function setCheckBoxes(cb, value) {
    if (value == 0)
    {
        cb.checked = false;
    }
    else if (value == 1)
    {
        cb.checked = true;
    }
    else
    {
        cb.indeterminate=true;
    }
}

值得注意的是，您的原始方法和上述方法都依赖于JavaScript，因此您需要在页面上启用JavaScript。

发送3状态复选框的值

1 个答案: