發送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狀態複選框的值

回答

相關問題