发送3状态复选框的值

Question

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)

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);
    }
 }

And 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. You may ask why I don't use other options like dropdown? Here is why:

Thanks!

Answer 1

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"]?>'>

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.

Then in 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);
}

...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;
    }
}

---

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.