发送3状态复选框的值 [英] Sending Values of 3 State Checkbox

问题描述

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

I have developed a 3 state checkbox that allows me to send 3 different values. Here are the values that I have set for a checkbox.

State 0 [] = Uncheck (Value = 0)

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

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

现在问题出在通过POST方法发送值时.由于未选中取消选中"和不确定"，因此不会发送值，并且在状态0或状态2的数据库上我都将获得值0.

Now the problem lays when sending the values via POST method. Since Uncheck and Indeterminate are unselected, the values don't get sent and I get a value of 0 on the database on both state 0 or state 2.

这是复选框的逻辑脚本:

This is the logic script for the checkboxes:

<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)">

由于我知道我正在尝试解决默认行为(复选框)，因此任何人都可以提供有关如何解决此问题的任何意见吗?

Can anyone give me any input on how to fix this problem since I know that I am trying to make a workaround the default behavior oh checkboxes?

PS.您可能会问为什么我不使用下拉菜单之类的其他选项?这是原因:

PS. You may ask why I don't use other options like dropdown? Here is why:

谢谢！

推荐答案

如果您以经典形式执行此操作，并且始终希望接收一个值，那么一种相当标准的方法是根本不发送复选框的值.而是在隐藏的表单字段中包含您要发送的值.

If you're doing this in a classic form and always want to receive a value, a fairly standard approach is not to send the checkbox's value at all; instead, have a hidden form field with the value you want to send.

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

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

Notice that the checkbox has no name, and so will not be included in the form when submitted. Also note that the hidden field has a name which matches the id of the checkbox. I use that in changeBoxValues below to relate the two fields, but it's just one way to do it; another would be a data-* attribute or even just cb.nextElementSibling and ensuring that the hidden field is always the next element after the checkbox element.

然后在 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 来确定要设置的状态:

...and setCheckBoxes uses the value passed in rather than cb.value to determine which state to set:

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

---

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

---

It's worth noting that both your original approach and the above rely on JavaScript, so you'll need to require that JavaScript be enabled on the page.

这篇关于发送3状态复选框的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！