发送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。你可能会问,为什么我不使用其他选项,如下拉?这是为什么:
如果您以传统形式进行此操作并始终想要接收值,则相当标准的方法是不发送复选框的值;相反,有一个隐藏的表单字段与您想要发送的值。
<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。
谢谢你的回答。代码工作正常,并在mysql db上正确更新,但当重新加载页面时,复选框值始终处于状态2 [ - ]。它永远不会改变。任何想法为什么?谢谢! +我删除了计数器变量。 –
@MichaelOrtiz:听起来好像你在页面加载时调用了'setCheckBoxes'(这是有道理的),你需要修改它来提供第二个参数。 –
我错过了!谢谢你,先生。在这种情况下,这是我做的: setCheckBoxes(document.getElementById('LEVL1LES1'),document.getElementsByName('LEVL1LES1')[0] .value); –
这听起来像一个“你是错误的”类型的情况。单选按钮或下拉菜单更适合于此。我知道你知道这一点,但你想在这里完成什么不符合单选按钮/下拉列表可以做什么? –
三态复选框是相当标准的UI功能,这是HTML中的一个原因(它们是专门处理的)(https://www.w3.org/TR/html5/forms.html#dom-input-indeterminate) 。 –
我没有处理它错误。这是一个要求,我必须使用复选框。相信我,如果有另一种方式我会使用它。 –