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

问题

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>

回答1:

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....,

回答2:

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

来源：https://stackoverflow.com/questions/44803832/trying-to-add-checkbox-dynamically-does-not-display-the-value-in-ui-but-in-conso

标签

jquery

html

bootstrap-grid