Results 1 to 4 of 4

Thread: Fairly simple dynamic Checkbox creating Script.

  1. #1
    Join Date
    Apr 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Fairly simple dynamic Checkbox creating Script.

    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.
    Last edited by krs; 04-21-2012 at 03:13 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by jscheuer1; 04-21-2012 at 07:01 PM. Reason: Format

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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);
                    
    	}
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    krs (04-22-2012)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •