发送3状态复选框的值

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

State 0 [] = Uncheck (Value = 0) 

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

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

现在问题出现在通过POST方法发送值时。由于取消选中和不确定未选择的，值不被发送，我在两个状态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。你可能会问，为什么我不使用其他选项，如下拉？这是为什么：

谢谢！

来源

2017-07-25 Michael Ortiz

这听起来像一个“你是错误的”类型的情况。单选按钮或下拉菜单更适合于此。我知道你知道这一点，但你想在这里完成什么不符合单选按钮/下拉列表可以做什么？ –

三态复选框是相当标准的UI功能，这是HTML中的一个原因（它们是专门处理的）（https://www.w3.org/TR/html5/forms.html#dom-input-indeterminate）。 –

我没有处理它错误。这是一个要求，我必须使用复选框。相信我，如果有另一种方式我会使用它。 –

如果您以传统形式进行此操作并始终想要接收值，则相当标准的方法是不发送复选框的值;相反，有一个隐藏的表单字段与您想要发送的值。

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

来源

2017-07-25 07:01:25

谢谢你的回答。代码工作正常，并在mysql db上正确更新，但当重新加载页面时，复选框值始终处于状态2 [ - ]。它永远不会改变。任何想法为什么？谢谢！ +我删除了计数器变量。 –

@MichaelOrtiz：听起来好像你在页面加载时调用了'setCheckBoxes'（这是有道理的），你需要修改它来提供第二个参数。 –

我错过了！谢谢你，先生。在这种情况下，这是我做的： setCheckBoxes（document.getElementById（'LEVL1LES1'），document.getElementsByName（'LEVL1LES1'）[0] .value）; –

发送3状态复选框的值

回答

相关问题