Van*_*ter 0 html javascript checkbox function
我在修复JS代码时遇到了一些问题.在代码段中,您可以看到我的程序,
现在单击第一个复选框.一条消息出现在bottem上,只要我输入一个数字,消息应该消失,文本框不应该禁用...
当我单击第二个复选框时,该消息应附加到前一个,但它只是覆盖...然后使用与前一个相同的值...
任何人都可以给我一些想法吗?测试功能应该有问题......
先感谢您.
// JavaScript source code
function test(el)
{
divOutput = document.getElementById("msgbox2");
strValideer = "<ul>";
var txt = document.getElementById(el.id.replace('chk', 'txt'))
if (el.checked === true ) {
txt.disabled = false;
if(txt.value==="")
{
strValideer += "<li><b>" + txt.name + ": </b>verplicht veld</li>";
}
}
else if (el.checked === false)
{
txt.disabled = true;
return;
}
strValideer += "</ul>";
divOutput.innerHTML = strValideer;
}Run Code Online (Sandbox Code Playgroud)
<fieldset>
<legend>Bestel gegevens</legend>
<div class="container">
<div class="row">
<div class="span7" id="houtsoorten">
<div class="control-group">
<label class="control-label">
bangkirai
<input id="chkbangkirai" type="checkbox" onchange="test(this)" >
</label>
<div class="controls">
<div class="input-append">
<input class="inpbox input-mini" type="text" id="txtbangkirai" name="bangkirai" placeholder="aantal" disabled oninput="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
beukenhout
<input id="chkbeukenhout" type="checkbox" onchange="test(this)">
</label>
<div class="controls">
<div class="input-append">
<input class="inpbox input-mini" type="text" id="txtbeukenhout" name="beukenhout" placeholder="aantal" disabled oninupt="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
dennenhout
<input id="chkdennenhout" type="checkbox" onchange="test(this)">
</label>
<div class="controls">
<div class="input-append">
<input class="inpbox input-mini" type="text" id="txtdennenhout" name="dennenhout" placeholder="aantal" disabled oninput="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
eikenhout
<input id="chkeikenhout" type="checkbox" onclick="test(this)">
</label>
<div class="controls">
<div class="input-append">
<input class="inpbox input-mini" type="text" id="txteikenhout" name="eikenhout" placeholder="aantal" disabled oninput="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
kastanjehout
<input id="chkkastanjehout" type="checkbox" onchange="test(this)">
</label>
<div class="controls">
<div class="input-append">
<input class="inpbox input-mini" type="text" id="txtkastanjehout" name="kastanjehout" placeholder="aantal" disabled oninput="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
lindehout
<input id="chklindehout" type="checkbox" onchange="test(this)">
</label>
<div class="controls">
<div class="input-append">
<input class="inpbox input-mini" type="text" id="txtlindehout" name="lindehout" placeholder="aantal" disabled oninput="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
notenhout
<input id="chknotenhout" type="checkbox" onchange="test(this)">
</label>
<div class="controls">
<div class="input-append inline">
<input class="inpbox input-mini" type="text" id="txtnotenhout" name="notenhout" placeholder="aantal" disabled oninput="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
rubberhout
<input id="chkrubberhout" type="checkbox" onchange="test(this)">
</label>
<div class="controls">
<div class="input-append inline">
<input class="inpbox input-mini" type="text" id="txtrubberhout" name="rubberhout" placeholder="aantal" disabled oninput="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
Cederhout
<input id="chkCederhout" type="checkbox" onchange="test(this)">
</label>
<div class="controls">
<div class="input-append inline">
<input class="inpbox input-mini" type="text" id="txtCederhout" name="Cederhout" placeholder="kg" disabled oninput="test(this)">
<span class="add-on">kg</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">betalingswijze</label>
<div class="controls">
<label class="radio">
<input type="radio" name="optionsRadios" id="visa" value="visa">
visa
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="overschrijving" value="overschrijving">
overschrijving
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="cash" value="cash">
cash
</label>
</div>
</div>
<div class="control-group">
<label class="control-label">opmerkingen:</label>
<div class="controls">
<textarea rows="5" placeholder="opmerkingen"></textarea>
</div>
</div>
</div>
<div class="span4 valid">
<div id="msgbox2" class="alert alert-error" style="display: block;">validatie bestelgegevens verschijnt hier
</div>
<div class="span1"><!--lege kolom--></div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</div>
</fieldset>Run Code Online (Sandbox Code Playgroud)
您需要先检查孩子是否有节点.检查它现在可以使用的功能
var list = [];
function test(el) {
divOutput = document.getElementById("msgbox2");
strValideer = "<ul>";
var txt = document.getElementById(el.id.replace('chk', 'txt'));
if (el.checked === true) {
txt.disabled = false;
if (txt.value === "") {
list.push(txt.name);
}
}
else if (el.checked === false) {
txt.disabled = true;
list.splice(list.indexOf(txt.name), 1);
}
for (var i = 0; i < list.length; i++) {
strValideer += "<li><b>" + list[i] + ": </b>verplicht veld</li>";
}
strValideer += "</ul>";
divOutput.innerHTML = strValideer;
}
Run Code Online (Sandbox Code Playgroud)