How to insert a checkbox in a list in javascript?

Question

I'm trying to create a todo list with JS. The idea is to write something in the input and when the user clicks the button, he obtains a checkbox with the text on it.

The problem is that I don't know how can I do it with JS. I tried to change the 'li' to an input and then setAttribute("type", "checkbox"), but nothing happened.

<!DOCTYPE html>
<html>
<head>
    <title>Lista de tareas personal.</title>
    <meta charset='utf-8'>
    <style type="text/css">
        body{
            font-family: Helvetica, Arial;
        }
        li{
            width: 50%;
            list-style-type: none;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>Lista de tareas personal.</h1>
    <hr>
    <br>
    <button type="button" id="btn" onclick="añadirItems">Añadir Item</button>
    <input type="text" id="texto">

    <!---<ul id="lista"> </ul>-->
    <ul id="ul"> </ul>

   <script type="text/javascript">
       function addItem(){
           var ul = document.getElementById('ul'); //ul
           var li = document.createElement('li');//li
           var text = document.getElementById('texto');
           li.appendChild(document.createTextNode(text.value));
           ul.appendChild(li);  
       }
       var button = document.getElementById('btn');
       button.onclick = addItem 
   </script>
</body>
</html>

Any suggestions?

You can use jQuery's $.replaceWith() method to convert your <li> to an <input type="checkbox">. — Mr. Polywhirl
– Mr. Polywhirl, Commented Jul 20, 2015 at 18:00

Sebastian Nette · Accepted Answer · 2015-07-20 18:05:08Z

6

You don't seem to use jquery, so the jquery tag wont get you helpful answers. You can create a checkbox in the same way you created your li element.

function addItem(){
    var ul = document.getElementById('ul'); //ul
    var li = document.createElement('li');//li

    var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.value = 1;
        checkbox.name = "todo[]";

    li.appendChild(checkbox);

    var text = document.getElementById('texto');
    li.appendChild(document.createTextNode(text.value));
    ul.appendChild(li); 
}

var button = document.getElementById('btn');
button.onclick = addItem;

http://jsfiddle.net/u7f5rwjs/1/

answered Jul 20, 2015 at 18:05

Sebastian Nette

7,9022 gold badges20 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:14:09Z

You can create dynamic checkbox like

$('#containerId').append('<input type="checkbox" name="myCheckbox" />');

where containerId is the id of the DOM element you want to add the checkbox to.

Or alternative syntax...

$('#containerId')
    .append(
       $(document.createElement('input')).attr({
           id:    'myCheckbox'
          ,name:  'myCheckbox'
          ,value: 'myValue'
          ,type:  'checkbox'
       })
    );

For more information See the following link: create dynamically radio button in jquery

Here it is showing how to create radio button using jQuery, you can change the code to create Checkbox.

As per your requirement :

function addItem(){
        var ul = document.getElementById('ul'); //ul
        var li = document.createElement('li');//li
        var text = document.getElementById('texto');
        li.appendChild( $(document.createElement('input')).attr({
               id:    'myCheckbox'
              ,name:  'myCheckbox'
              ,value: 'myValue'
              ,type:  'checkbox'
           }));
        ul.appendChild(li); 
}
    var button = document.getElementById('btn');
    button.onclick = addItem

Community · Accepted Answer · 2017-05-23 12:14:09Z

0

You can read this question: Creating the checkbox dynamically using javascript?

Just add the part of the checkbox in your code:

 function addItem(){
        var ul = document.getElementById('ul'); //ul
        var li = document.createElement('li');//li
        var text = document.getElementById('texto');

        var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.name = "name";
        checkbox.value = "value";
        checkbox.id = "id";

        li.appendChild(checkbox);
        li.appendChild(document.createTextNode(text.value));
        ul.appendChild(li); 
}

And the fiddle:

http://jsfiddle.net/8uwr3kpw/

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jul 20, 2015 at 18:04

Juan Marcos Armella

7376 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to insert a checkbox in a list in javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related