Fairly simple dynamic Checkbox creating Script.

**krs** · 04-21-2012, 11:36 AM

1) Describe Work Request (be as detailed as possible):

Hi,

I Want to dynamically create checkbox.After creating when I click that checkbox it should be removed.Also when I click a button(get values) it should give me all the values of the checkbox values.Another button(delete all) should remove all the checkboxes.I completed upto creating checkboxes need help me in removing and getting the values.check the attached file. Also when checkbox are created the div height should be auto adjusted.I think this will be taken care by default.can any body help me in this.

2) Payment methods you support (ie: Paypal, 2checkout etc):
paypal.

**jscheuer1** · 04-21-2012, 04:25 PM

Send $25 US to:

Donate

This fulfills the conditions in your post:

Code:

<html>
<head>
<title></title>
<script language="javascript">
function createchkboxes()
{
          for (var i = 0; i < 10; i++) {
               var label = document.createElement('label');
               var br = document.createElement('br');
               //var alabel = document.getElementById("<%=Label3.ClientID %>");
			   var alabel = document.getElementById('div1');
               var last = alabel[alabel.length - 1];
               label.htmlFor = "lbl"+i;
               label.appendChild(Createcheckbox('test' + i));
               label.appendChild(document.createTextNode('kings' + i));
               label.appendChild(br);
               //document.getElementById("<%=Label3.ClientID %>").appendChild(label);
			   document.getElementById('div1').appendChild(label);
                
}
}

 function Createcheckbox(chkboxid) {
           var checkbox = document.createElement('input');
           checkbox.type = "checkbox";
           checkbox.onclick = function(){
           	this.onclick = null;
           	var label = this.parentNode;
           	label.removeChild(this);
           	label.parentNode.removeChild(label);
           };
           checkbox.id = chkboxid;
           checkbox.value = chkboxid;
           return checkbox;
       }

function deleteAll(divId){
	var div = document.getElementById(divId), child;
	while(child = div.firstChild){
		div.removeChild(child);
	}
}

function getValues(divId){
	var boxes = document.getElementById(divId).getElementsByTagName('input'), vals = [];
	for(var i = 0; i < boxes.length; ++i){
		vals.push(boxes[i].value);
	}
	alert(vals.join('\n'));
}
</script>
</head>
<body>
<form>
<input type="button" id="btncreate" value="Create" onclick="createchkboxes()"/>
<input type="button" id="btndelete" value="Delete all" onclick="deleteAll('div1');"/>
<input type="button" id="btngetvalues" value="Get values" onclick="getValues('div1');"/>
<Div id='div1'>
</div>
</form>
</body>

If you want more help, let me know, depending upon what it is, it might require more money.

Any questions about the code requiring just an explanation though, feel free to ask.

**krs** · 04-21-2012, 06:32 PM

Great

It works.I paid the amount.can you explain in deletetall method you have

Code:

 var div = document.getElementById(divId), child;

.I understand you are getiing the divid whether ,child takes all the elements in that div. And also

Code:

label.removeChild(this);

what is removed here textbox or checkbox.

**jscheuer1** · 04-21-2012, 07:31 PM

In:

Code:

var div = document.getElementById(divId), child;

child is undefined. It's given a value in the highlighted section during each iteration of the while loop:

Code:

	while(child = div.firstChild){
		div.removeChild(child);
	}

Each time the code loops through that, the first child (a label element in this case, in some browsers there will also be empty text nodes to remove) in the division is removed until there are no children left.

But you asked a good question because some browsers might keep the checkbox's onclick event around in its garbage heap sapping memory. So that entire function should be:

Code:

function deleteAll(divId){
	var div = document.getElementById(divId), child, box;
	while(child = div.firstChild){
		if(child.getElementsByTagName && (box = child.getElementsByTagName('input')[0])){
			box.onclick = null;
			child.removeChild(box);
		}
		div.removeChild(child);
	}
}

to get rid of the checkbox and its onclick event first before removing the label element.

In:

Code:

label.removeChild(this);

this refers to the checkbox that was clicked. I don't see any textbox, perhaps you are referring to the label element. That's identified here:

Code:

var label = this.parentNode;

and removed here:

Code:

label.parentNode.removeChild(label);

Another thing occurred to me while looking this over again. In the creation part, I think the intent is to make the label be for the checkbox so that clicking on it will be the same as clicking on the checkbox. If so, change the creation function to:

Code:

function createchkboxes()
{
          for (var i = 0; i < 10; i++) {
               var label = document.createElement('label');
               var br = document.createElement('br');
               //var alabel = document.getElementById("<%=Label3.ClientID %>");
			   var alabel = document.getElementById('div1');
               var last = alabel[alabel.length - 1];
               label.appendChild(Createcheckbox(label.htmlFor = 'test' + i));
               label.appendChild(document.createTextNode('kings' + i));
               label.appendChild(br);
               //document.getElementById("<%=Label3.ClientID %>").appendChild(label);
			   document.getElementById('div1').appendChild(label);
                
	}
}

Thread: Fairly simple dynamic Checkbox creating Script.

Thread Tools

Search Thread

Fairly simple dynamic Checkbox creating Script.

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions