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

您需要检查复选框是否已选中并根据需要设置或清除输入：

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

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

Answer 2

我看到你将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

取消选中复选框时清除输入

2 个答案: