當複選框變爲未選中時清除輸入

Question

我正在製作一個帶有選項的窗體。用戶可以選擇儘可能多的應用。我的代碼位於：

<b>Options</b> 
<br> 
<font size="1"> Please select all options wanted</font> 
<br> 
<input type="checkbox" id="none" value="X"  onchange="updateText('none')">None 
<br> 
<input type="checkbox" id="prof" value="P" onchange="updateText('prof')">Profiled w/ Data 
<br> 
<input type="checkbox" id="slave" value="SL" onchange="updateText('slave')">Slaved each end 
<br> 
<input type="checkbox" id="silco" value="SN" onchange="updateText('silco')">SilcoNert® Coating 
<br> 
<input type="checkbox" id="pass" value="PP" onchange="updateText('pass')">Power Pass Through 
<br> 
<input type="checkbox" id="dur" value="DR" onchange="updateText('dur')">Dursan Coating 
<br> 
<input type="checkbox" id="thermo" value="TP" onchange="updateText('thermo')">Thermocouple Pass Through 
<br> 
<input type="checkbox" id="ss" value="SR" onchange="updateText('ss')">Stainless Steel 1/16" Braided Strain Relief 
<br> 
<br> 
<input type="hidden" value="" maxlength="1" size="1" id="profText" /> 
<input type="hidden" value="" maxlength="1" size="1" id="slaveText" /> 
<input type="hidden" value="" maxlength="1" size="1" id="silcoText" /> 
<input type="hidden" value="" maxlength="1" size="1" id="passText" /> 
<input type="hidden" value="" maxlength="1" size="1" id="durText" /> 
<input type="hidden" value="" maxlength="1" size="1" id="thermoText" /> 
<input type="hidden" value="" maxlength="1" size="1" id="options2Text" /> 
<input type="text" value="" maxlength="1" size="1" id="completeText" style="width: 200px; border:1px solid #CC0000;" /> 

< script type = "text/javascript" > 

function updateText(type) { 
    var id = type + 'Text'; 
    var endValue; 
    var inputValue = document.getElementById(type).value; 

    document.getElementById(id).value = inputValue; 

    endValue = document.getElementById("seriesText").value; 
    if (document.getElementById("tubeText").value != "") { 
     endValue = endValue + "-" + document.getElementById("tubeText").value; 
    } 
    if (document.getElementById("sizeText").value != "") { 
     endValue = endValue + "-" + document.getElementById("sizeText").value; 
    } 
    if (document.getElementById("voltageText").value != "") { 
     endValue = endValue + "-" + document.getElementById("voltageText").value; 
    } 
    if (document.getElementById("sensorText").value != "") { 
     endValue = endValue + "-" + document.getElementById("sensorText").value; 
    } 
    if (document.getElementById("temperatureText").value != "") { 
     endValue = endValue + "-" + document.getElementById("temperatureText").value; 
    } 
    if (document.getElementById("sleeveText").value != "") { 
     endValue = endValue + "-" + document.getElementById("sleeveText").value; 
    } 
    if (document.getElementById("portText").value != "") { 
     endValue = endValue + "-" + document.getElementById("portText").value; 
    } 
    if (document.getElementById("connectorText").value != "") { 
     endValue = endValue + "-" + document.getElementById("connectorText").value; 
    } 
    if (document.getElementById("lengthText").value != "") { 
     endValue = endValue + "-" + document.getElementById("lengthText").value; 
    } 
    if (document.getElementById("profText").value != "") { 
     endValue = endValue + "-" + document.getElementById("profText").value; 
    } 
    if (document.getElementById("slaveText").value != "") { 
     endValue = endValue + "-" + document.getElementById("slaveText").value; 
    } 
    if (document.getElementById("silcoText").value != "") { 
     endValue = endValue + "-" + document.getElementById("silcoText").value; 
    } 
    if (document.getElementById("passText").value != "") { 
     endValue = endValue + "-" + document.getElementById("passText").value; 
    } 
    if (document.getElementById("durText").value != "") { 
     endValue = endValue + "-" + document.getElementById("durText").value; 
    } 
    if (document.getElementById("thermoText").value != "") { 
     endValue = endValue + "-" + document.getElementById("thermoText").value; 
    } 
    if (document.getElementById("options2Text").value != "") { 
     endValue = endValue + "-" + document.getElementById("options2Text").value; 
    } 
    document.getElementById("completeText").value = endValue; 
} < /script> 
</body > < /div> 
</div > < /div> 
</div > <br> 

當用戶拿起的選項，該選項的值應該出現在底部的輸入框。但是，當用戶選擇某個選項時，即使未選中該框，該值仍保留在輸入框中。有沒有辦法清除這個值，如果複選框從檢查到未選中使用JavaScript？

我對Javascript/HTML有點新，我在Google上搜索過。結果似乎不適用於我的代碼。

Answer 1

我看你包括jQuery的一個標籤，所以我有一個工作，但對你的業餘的jQuery解決方案。我確實改變了你的html，特別是從文本框中刪除了最大長度和大小。

<b>Options</b> 
<br> 
<font size="1"> Please select all options wanted</font> 
<br> 
<input type="checkbox" id="none" value="X">None 
<br>Profiled w/ Data 
<br> 
<input type="checkbox" id="slave" class="choice" value="SL">Slaved each end 
<br> 
<input type="checkbox" id="silco" class="choice" value="SN">SilcoNert® Coating 
<br> 
<input type="checkbox" id="pass" class="choice" value="PP">Power Pass Through 
<br> 
<input type="checkbox" id="dur" class="choice" value="DR">Dursan Coating 
<br> 
<input type="checkbox" id="thermo" class="choice" value="TP">Thermocouple Pass Through 
<br> 
<input type="checkbox" id="ss" class="choice" value="SR">Stainless Steel 1/16" Braided Strain Relief 
<br> 
<br> 
<input type="text" id="choiceDisplay" value="" id="completeText" style="width: 200px; border:1px solid #CC0000;" readOnly/> 


var $choiceDisplay = $("#choiceDisplay"), //jquery selector for the display box 
    $none = $("#none"), //jquery selector for clear-choices option 
    $choice = $(".choice"); //jquery selector for choices to list 

$choice.on("change", function() { 
    var $this = $(this), //jquery selector for the changed input 
     isThisChecked = $this.prop("checked"), //true if the box is checked 
     choiceSelectionsArray = $choiceDisplay.val().split(",").filter(function(e){return e !== ""}), //array of values that are checked 
     isThisValueInDisplayedSelection = $.inArray($this.val(), choiceSelectionsArray) !== -1; //true when $this value displayed 

    if (isThisChecked) { 
     if (isThisValueInDisplayedSelection) { 
      return false; //odd, the value is already displayed. No work to do. 
     } else { //value not in selection, so add it 
      choiceSelectionsArray.push($this.val()); 
      $choiceDisplay.val(choiceSelectionsArray.join()); 
     } 
    } else { //box has been unchecked 
     if (isThisValueInDisplayedSelection) { 
      choiceSelectionsArray = choiceSelectionsArray.filter(function(e){return e !== $this.val()}) 
      $choiceDisplay.val(choiceSelectionsArray.join()); 
     } 
    } 
}); 

$none.on("change", function() { 
    var $this = $(this), 
     isThisChecked = $this.prop("checked"); 
    if(isThisChecked){ 
     $choice.prop({ 
      disabled: true, 
      checked : false 
     }); 
     $choiceDisplay.val(""); 
    }else{ 
     $choice.prop({disabled: false}); 
     return false; 
    } 
}); 

jsFiddle

Answer 2

您需要檢查複選框是否被選中，並設置或清除輸入的需要：

function updateText(type) { 
    var id = type + 'Text'; 
    var checkbox = document.getElementById(type); 
    var endValue; 

    document.getElementById(id).value = checkbox.checked ? checkbox.value : '';