尝试动态添加复选框不会在 UI 中显示值，但在控制台中会显示答案

【问题标题】：Trying to add checkbox dynamically does not display the value in UI but in console it is displayed尝试动态添加复选框不会在 UI 中显示值，但在控制台中会显示
【发布时间】：2017-12-01 21:32:31
【问题描述】：

我正在尝试使用其值动态添加复选框。我能够在控制台中看到该值，就像这样，它只在页面中显示复选框。这是我的代码。

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

【问题讨论】：

检查答案。你的解决方案应该在那里。

标签： jquery html bootstrap-grid

【解决方案1】：

试试下面的代码，它正在工作.. 并确保它对你有帮助...，我使用了 bootstape 类，所以它看起来很好并且对齐..

    <!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>

我已经更新了一些代码……在控制台中显示检查的输入值……，

【讨论】：

嘿，太棒了！非常感谢:)
哦！欢迎！太棒了！
我们解决了这个问题，但我很好奇为什么我没有在页面上获得任何值？有什么想法吗？
为了访问输入值（复选框）...你必须使用选择器而不是获取特定复选框的值
我已经用代码新更改更新了答案...我添加了新按钮，当您单击该按钮时，检查控制台中显示的输入值...，看看...，如果有任何疑问..让我知道...

【解决方案2】：

您必须像这样为每个复选框关联一个<label>

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

请注意，标签包含引用特定复选框的for 属性。为了您的玩耍，我还创建了一个PLUNKR

【讨论】：

是的，我试过了。问题是，如果我添加标签，那么我没有连续获得 3 个复选框。它以列表格式添加。
检查 plunkr。它只是我在复选框和标签中添加的引导类
如果您仍有问题，请告诉我。
我还是有这个问题。尝试几个新的复选框，你会发现对齐问题:)
我看到复选框正确对齐。请看这个截屏视频screencast.com/t/pvyFEQqp