JavaScript消息

Question

我在修复 JS 代码时遇到一些问题。在代码片段中你可以看到我的程序，

现在单击第一个复选框。底部会出现一条消息，只要我在其中输入数字，该消息就会消失，并且文本框不应禁用...

当我单击第二个复选框时，消息应该附加到前一个复选框，但它只是覆盖...然后使用与前一个复选框相同的值...

有人能给我一些关于这方面的想法吗？测试功能应该有问题......

提前谢谢您。

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

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

Answer 1

您需要首先检查子级是否有节点。检查现在可以使用的功能

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