Javascript 复选框未选中时清除输入_Javascript_Jquery_Html_Checkbox

Javascript 复选框未选中时清除输入

javascript jquery html checkbox

Javascript 复选框未选中时清除输入,javascript,jquery,html,checkbox,Javascript,Jquery,Html,Checkbox,我正在制作一个表格，里面有选项。用户可以选择任意数量的应用程序。我的代码位于此处： <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 <

我正在制作一个表格，里面有选项。用户可以选择任意数量的应用程序。我的代码位于此处：

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

选项


请选择所需的所有选项


没有一个


资料简介


每端都有奴隶


SilcoNert®涂层


功率传递


杜桑涂层


热电偶通过


不锈钢1/16“编织应变消除

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

<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; } });

选项请选择所需的所有选项没有一个资料简介每端都有奴隶 SilcoNert®涂层功率传递杜桑涂层热电偶通过不锈钢1/16“编织应变消除 var$choiceDisplay=$（“#choiceDisplay”），//显示框的jquery选择器 $none=$（“#none”），//用于清除选项的jquery选择器 $choice=$（“.choice”）//要列出的选项的jquery选择器 $choice.on（“更改”，函数（）{ var$this=$（this），//用于更改输入的jquery选择器 isThisChecked=$this.prop（“checked”），//如果选中该框，则为true choiceSelectionsArray=$choiceDisplay.val（）.split（“，”）.filter（函数（e）{return e！==”“}），//检查的值数组 IsThisValueInPlayedSelection=$.inArray（$this.val（），choiceSelectionsArray）！=-1；//显示$this值时为true 如果（是否已选中）{ 如果（IsThisValueInPlayedSelection）{ return false；//奇数，该值已显示。无需执行任何操作。 }else{//值不在所选内容中，请添加它 ChoiceSelectionArray.push（$this.val（））； $choiceDisplay.val（ChoiceSelectionArray.join（））； } }else{//框已取消选中如果（IsThisValueInPlayedSelection）{ ChoiceSelectionArray=ChoiceSelectionArray.filter（函数（e）{return e！==this.val（）}） $choiceDisplay.val（ChoiceSelectionArray.join（））； } } }); $none.on（“更改”，函数（）{ 变量$this=$（this）， isThisChecked=$this.prop（“checked”）；如果（是否已选中）{ $choice.prop({ 残疾人:对,，勾选：假 }); $choiceDisplay.val（“”）； }否则{ $choice.prop（{disabled:false}）；返回false； } });