Javascript-How to create a checkbox?

Question

2.00/5 (1 vote)

See more:

C#

function checkData(PrjList)
{

   var handler = document.getElementById("LoadCheckbox");
   var val=PrjList;
   console.log(val);
 var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = val;
checkbox.id = val;

var label = document.createElement('label')
label.appendChild(document.createTextNode(val));

handler.appendChild(checkbox);
handler.appendChild(label);
}

Above is a function to create a checkbox.'Prjlist' is the values to be given in the checkbox,that is passed from other function.i can display the values but the checkbox sign doesnot appear.
Can anybody identify what is the problem here???Please help...

Posted 21-May-14 20:46pm

p@y@l

Updated 21-May-14 21:10pm

v2

Add a Solution

Comments

Peter Leow 22-May-14 3:13am

What do you mean "checkbox sign doenot appear"? you code looks fine.

p@y@l 22-May-14 3:36am

The small square box doesnot appear..

Ajith K Gatty 22-May-14 3:19am

did u mean by " check box sign doesn't appear " that u cant see the small void square box??? but only label is visible.

p@y@l 22-May-14 3:36am

yes.I mean the same..

Ajith K Gatty 23-May-14 1:36am

u have a variable handler. is that the div object where you want to place the check box??

p@y@l 23-May-14 1:56am

s its a div id.

Ajith K Gatty 23-May-14 3:51am

yeah!!! i guessed it. Hope now u r problem is resolved.

Rao Lokesh 23-May-14 1:48am

http://stackoverflow.com/questions/866239/creating-the-checkbox-dynamically-using-javascript

Sergey Alexandrovich Kryukov 22-May-14 9:15am

If "LoadCheckbox" some existing element, or what is that? Is that the ID of some container element? Please check up.
—SA

p@y@l 23-May-14 1:57am

its a DIV id

Mohibur Rashid 11-Jun-14 5:34am

I agree with Sergey, you must have have problem with your DIV cause your code works fine

p@y@l 11-Jun-14 7:08am

It is corrected now that was a css style problem.

5 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ajith K Gatty · Answer 1 · 2014-05-22T19:44:00

Hi,

C#

label.appendChild(checkbox);   // add the box to the element
label.appendChild(document.createTextNode(val));// add the description to the element

// add the label element to your div
document.getElementById('div').appendChild(label);

use this and check the result once.

Good Luck

Rao Lokesh · Answer 2 · 2014-05-22T19:48:00

Solution 3

Refer

http://stackoverflow.com/questions/866239/creating-the-checkbox-dynamically-using-javascript[^]

Posted 22-May-14 19:48pm

Rao Lokesh

p@y@l · Answer 3 · 2014-06-10T21:39:00

Solution 4

The code I posted was correct,because of the css style applied in it the checkbox was not visible..Thanks for the help every1

Posted 10-Jun-14 21:39pm

p@y@l

Mitesh Gadhiya · Answer 4 · 2014-06-10T22:47:00

Solution 5

using below code checkbox is created

JavaScript

var checkbox = document.createElement('checkbox')

After creating checkbox you need to append to your page to display checkbox

JavaScript

document.getElementById(parentElementId).appendChild(checkbox);

Hope it will work for you

Enjoy..11

Posted 10-Jun-14 22:47pm

Mitesh Gadhiya

Updated 10-Jun-14 22:53pm

v2

Comments

p@y@l 11-Jun-14 7:10am

its working fine now thank you.

Sunasara Imdadhusen · Answer 5 · 2014-05-21T21:16:00

Solution 1

please use checked attribute instead of value

JavaScript

function checkData(PrjList)
{
checkbox.checked = val;
}

Posted 21-May-14 21:16pm

Sunasara Imdadhusen

Comments

p@y@l 22-May-14 3:42am

but this wont show the check box sign..I need the square box to be shown in screen. :(

Sunasara Imdadhusen 11-Jun-14 6:34am

Hey Payal,
what is LoadCheckbox id it div or what? Can you please provide your HTML code as well

p@y@l 11-Jun-14 7:09am

Yes it is a DIV element- <div id="LoadCheckbox"></div>

Javascript-How to create a checkbox?

5 solutions

Solution 2

Solution 3

Solution 4

Solution 5

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us