Question

133

How to insert a checkbox in a list in javascript?

rated 0 times [ 134] [ 1] / answers: 1 / hits: 19145 / 9 Years ago, mon, july 20, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

johnnyblaynes

Add To Favorites

Follow

Total Points: 667

Total Questions: 121

Total Answers: 102

Location: Anguilla

Member since Sat, Jan 23, 2021

3 Years ago

johnnyblaynes questions

1 Error: Cannot find module 'C:\Users\rodri\nodejs_paypal\src\index.js'

Mon, Jul 18, 22, 00:00, 2 Years ago

1 React.js: Fetching Data from API with Bearer Token

Tue, Feb 22, 22, 00:00, 2 Years ago

1 How can I navigate to a nested Route in React Router Dom V6

Fri, Nov 12, 21, 00:00, 3 Years ago

1 How to programatically reduce PDF Size in Node/Javascript

Tue, May 19, 20, 00:00, 4 Years ago

1 How to set Focus on Input using Tab Key Press in Next Table Cell

Mon, Apr 20, 20, 00:00, 4 Years ago

View All

answered 9 Years ago jadon · Accepted Answer

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/