<html>
<head>
<title></title>
<style type="text/css">
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;}
</style>
</head>
<body>
<script>
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);
}
}
}
</script>
<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>
I want to have a dynamic page that allows user to add checkboxes to the page. Checkboxes content is input int the textbox. When user push the add-button , checkboxes is created and are shown. User must have ability to remove checkboxes by marking them. The code can add a new checkbox to the form but delete function does not work. It seems that chbox is not created and if-statement does nothing in the function delBoxes. Any suggestions?
Aucun commentaire:
Enregistrer un commentaire