Trying to add checkbox dynamically does not display the value in UI but in console it is displayed

Question

I'm trying to add checkbox dynamically with its value.I"m able to see the value in the console, like this where as, it is displaying only checkbox in the page.This is my code.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row text-center" >
<div  style="width:30%;"  id="cblist" ></div>

</div>

<input type="button" value="AddCheckbox" id="btnSave" />

<script type="text/javascript">
$(document).ready(function() {
    $('#btnSave').click(function() {
        addCheckbox();
    });
});

function addCheckbox(name) {
   var container = $('#cblist');
   var inputs = container.find('input');
   var id = inputs.length+1;
   $('<input/>', { type: 'checkbox', id: 'cb'+id, value: 'cb'+id,class:'col-xs-4'}).html('hello').appendTo(container);     
}

</script>

Check the answer. Your solution should be there. – Ankit Agarwal Jun 28 '17 at 13:35 — Ankit Agarwal, Jun 28 '17 at 13:35

Binary Brackets · Accepted Answer · 2017-06-28T14:09:40.720

Try below code, It's working.. and sure it will helpful for you..., I have used bootstape class, so it will looks fine & aligned..

    <!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style type="text/css">
            .checkbox + .checkbox, .radio + .radio {
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div class="container">

            <br/><br/>
            <input type="button" value="AddCheckbox" id="btnSave" />
            <input type="button" value="Display Checkbox value" id="displayBtn" />
            <br/><br/>

            <div class="row text-center" >
                <div class="col-md-12" id="cblist" ></div>
            </div>

        </div>
    </body>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnSave').click(function() {
                addCheckbox();
            });

            $('#displayBtn').click(function() {
                displayValue();
            });
        });

        function addCheckbox(name) {
            var container = $('#cblist');
            var inputs = container.find('input');
            var id = inputs.length+1;

            $html = '<div class="checkbox col-md-4">';
            $html += '<label><input type="checkbox" name="cb[]" value="cb'+id+'" id="cb'+id+'">hello '+id+'</label>';
            $html += '</div>';

            container.append($html);
        }

        function displayValue(){

            $('input[type="checkbox"]:checked').each(function() { //Get the only checked item
                console.log($(this).val());
            });

        }
    </script>
</html>

I have update some code... that shows checked input values in console....,

We resolved the issue,But I'm curious why I was not getting any values on the page? any idea? — Hema Nandagopal, Jun 28 '17 at 13:52
For accessing the value of inputs(checkbox)... you have to use selector than get the value of specific checkbox — Binary Brackets, Jun 28 '17 at 13:59
I have updated the answer with code new changes... I have added new button, when you click on that button, check input values shown in console..., have a look..., If any query.. let me know... — Binary Brackets, Jun 28 '17 at 14:11
Yes,saw the updated codes.But the console.log is not diaplaying any value for displayValue.Can you check it? — Hema Nandagopal, Jun 28 '17 at 14:14
Okay... Follow the steps.. 1.Add multiple checkbox.... 2.select(checked) some checkbox... than 3. click on `Display Checkbox value` button..., check your console... console have multiple checkbox values.... — Binary Brackets, Jun 28 '17 at 14:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/147838/discussion-between-hema-nandagopal-and-binary-brackets). — Hema Nandagopal, Jun 28 '17 at 14:24

score 0 · Answer 2 · answered Jun 28 '17 at 13:34

0

You have to associate a <label> for each checkbox like this

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row text-center" >
<div  style="width:30%;"  id="cblist" ></div>

</div>

<input type="button" value="AddCheckbox" id="btnSave" />

<script type="text/javascript">
$(document).ready(function() {
    $('#btnSave').click(function() {
        addCheckbox();
    });
});

function addCheckbox(name) {
   var container = $('#cblist');
   var inputs = container.find('input');
   var id = inputs.length+1;
   $('<input/>', { type: 'checkbox', id: 'cb'+id, value: 'cb'+id,class:'col-xs-4'}).text('hsssello').appendTo(container);     
   $('<label />', { 'for': 'cb'+id, text: 'label'+id, class:'col-xs-8' }).appendTo(container);
}

</script>

Notice that the label contains the for attribute that refers to the particular checkbox. For your play around i have also created a PLUNKR

answered Jun 28 '17 at 13:34

Ankit Agarwal

30,378
5
37
62

Yes,I tried this.The problem is,if I add label then I'm not getting the 3 checkbox in an row.Its adding in the list format. – Hema Nandagopal Jun 28 '17 at 13:36
Check the plunkr. Its just the bootstrap class i have added in checkbox and label – Ankit Agarwal Jun 28 '17 at 13:37
Let me know if you still have issues. – Ankit Agarwal Jun 28 '17 at 13:38
I still have the problem.Try to few new checkboxes, you'll find the alignment issue :) – Hema Nandagopal Jun 28 '17 at 13:39
I see the checkbox aligned properly. Please see this screencast https://www.screencast.com/t/pvyFEQqp – Ankit Agarwal Jun 28 '17 at 13:41
I'm unable to see it,Hey Are you getting 3 checbox in an row with their label? – Hema Nandagopal Jun 28 '17 at 13:42
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/147828/discussion-between-aka-and-hema-nandagopal). – Ankit Agarwal Jun 28 '17 at 13:43

Trying to add checkbox dynamically does not display the value in UI but in console it is displayed

2 Answers2

Linked