Question

＆＃13;

function newCheckbox(){
    var aLabel = document.form1.getElementsByTagName('label');
    var last = aLabel[aLabel.length-1];
    var label = document.createElement('label');
    label.appendChild(Box(aLabel.length));
    label.appendChild(document.createTextNode('      '+document.getElementById('text').value));
    last.parentNode.insertBefore(label, last);
    document.getElementById('text').value = '';
}

function Box(num){
    var elm = null;
    try {
        elm=document.createElement('<input type="checkbox" id="chk'+num+'">');
    }
    catch(e) {
        elm = document.createElement('input');
        elm.setAttribute('type', 'checkbox');
        elm.id='chk'+num;
    }
    return elm;
}

function delBoxes(){ 
    var texts = document.form1.getElementsByTagName('label');
    for(var i = 0; i<texts.length-1; i++){
        var chbox=Box[i];
        txt = texts[i];
        if(chbox.checked){
            chbox.parentNode.removeChild(chbox);
            txt.parentNode.removeChild(txt);
        }
    }
}

＆＃13;

form{
	color:blue;
	font-weight:bold;
	margin:100 0 0 50;
	font-weight:bold;
	margin-left:120;
	padding:100;
}

label{
	display:block;
}

input{
	color:blue;
	background-color:pink;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <form action="#" name="form1">
            <div>
                <label>Checkbox text:<input type="text" id="text"></label>
                <input type="button" onclick="newCheckbox();"value="add">
                <input type="button" value="Delete" onclick = "delBoxes();"/>
            </div>
        </form>
    </body>
</html>

＆＃13;

我希望有一个动态页面，允许用户向页面添加复选框。复选框内容是文本框中的输入。

当用户按下“添加”按钮时，会创建并显示复选框。用户必须能够通过标记来删除复选框。代码可以向表单添加新的复选框，但删除功能不起作用。

似乎chbox未创建且if - 语句在函数delBoxes中不执行任何操作。

有什么建议吗？

Answer 1

将您拥有的整个脚本替换为：

function newCheckbox() {
    var aLabel = document.form1.getElementsByTagName('label');
    var last = aLabel[aLabel.length-1];
    var label = document.createElement('label');
    label.appendChild(Box(aLabel.length));
    label.appendChild(document.createTextNode('      '+document.getElementById('text').value));
    last.parentNode.insertBefore(label, last);
    document.getElementById('text').value = '';
}

function Box(num) {
    var elm = null;
    try {
        elm=document.createElement('<input type="checkbox" class="chk">');
    }
    catch(e) {
        elm = document.createElement('input');
        elm.setAttribute('type', 'checkbox');
        elm.className='chk';
    }
    return elm;
}

function delBoxes(){ 
   var texts = document.form1.getElementsByTagName('label');
   var chbox = document.form1.getElementsByClassName('chk');
   for(var i = 0; i<texts.length-1; i++){
       if(chbox[i].checked){
           chbox[i].parentNode.removeChild(chbox[i]);
           texts[i].parentNode.removeChild(texts[i]);
       }
   }
}

如何删除表单中的复选框

1 个答案: