Jquery 尝试动态添加复选框不会在UI中显示该值，但会在控制台中显示该值_Jquery_Html_Bootstrap Grid

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

jquery html

Jquery 尝试动态添加复选框不会在UI中显示该值，但会在控制台中显示该值,jquery,html,bootstrap-grid,Jquery,Html,Bootstrap Grid,我正在尝试动态添加复选框及其值。我可以在控制台中看到该值，如下图所示，它在页面中仅显示复选框。这是我的代码 $（文档）.ready（函数（）{ $（'#btnSave'）。单击（函数（）{ addCheckbox（）； }); }); 函数addCheckbox（名称）{ 变量容器=$（“#cblist”）； var inputs=container.find（'input'）；变量id=输入。长度+1； $（''，{type:'checkbox'，id:'cb'+id，value:'cb

我正在尝试动态添加复选框及其值。我可以在控制台中看到该值，如下图所示，它在页面中仅显示复选框。这是我的代码


$（文档）.ready（函数（）{
$（'#btnSave'）。单击（函数（）{
addCheckbox（）；
});
});
函数addCheckbox（名称）{
变量容器=$（“#cblist”）；
var inputs=container.find（'input'）；
变量id=输入。长度+1；
$（''，{type:'checkbox'，id:'cb'+id，value:'cb'+id，class:'col-xs-4'}）.html（'hello'）.appendTo（容器）；
}

对于这样的每个复选框，您必须关联一个

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


$（文档）.ready（函数（）{
$（'#btnSave'）。单击（函数（）{
addCheckbox（）；
});
});
函数addCheckbox（名称）{
变量容器=$（“#cblist”）；
var inputs=container.find（'input'）；
变量id=输入。长度+1；
$（''，{type:'checkbox'，id:'cb'+id，value:'cb'+id，class:'col-xs-4'}）.text（'hsssello'）.appendTo（容器）；
$（“”，{for'：'cb'+id，text:'label'+id，class:'col-xs-8'}）；
}

请注意，标签包含引用特定复选框的

for

属性。

为了您的游戏，我还创建了一个

尝试下面的代码，它正在工作..而且肯定会对您有所帮助..我使用了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>


演示
.checkbox+.checkbox、.radio+.radio{
边缘顶部：10px；
}






$（文档）.ready（函数（）{
$（'#btnSave'）。单击（函数（）{
addCheckbox（）；
});
$（'#displayBtn'）。单击（函数（）{
displayValue（）；
});
});
函数addCheckbox（名称）{
变量容器=$（“#cblist”）；
var inputs=container.find（'input'）；
变量id=输入。长度+1；
$html=''；
$html+='hello'+id+''；
$html+=''；
container.append（$html）；
}
函数displayValue（）{
$（'input[type=“checkbox”]：checked'）。每个（function（）{//获取唯一选中的项
log（$（this.val（））；
});
}

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

检查答案。你的解决方案应该在那里。是的，我尝试了这个。问题是，如果我添加了标签，那么我没有得到一行中的3复选框。它是以列表格式添加的。检查plunkr。这只是我在复选框和标签中添加的引导类。请告诉我是否是y你仍然有问题。我仍然有问题。尝试几个新的复选框，你会发现对齐问题：）我看到复选框正确对齐。请看这个屏幕广播嘿，太棒了！！非常感谢：）哦！欢迎！太好了！我们解决了问题，但我很好奇为什么我在页面上没有得到任何值？有什么想法？访问值吗输入的数量（复选框）…您必须使用选择器，然后才能获取特定复选框的值我已使用新代码更新了答案…我已添加了新按钮，当您单击该按钮时，请检查控制台中显示的输入值…，查看…，如果有任何查询…请告诉我。。。