试图动态添加复选框不会显示UI中的值，但会显示在控制台中 [英] Trying to add checkbox dynamically does not display the value in UI but in console it is displayed
本文介绍了试图动态添加复选框不会显示UI中的值，但会显示在控制台中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图通过它的值动态添加复选框。我能够看到控制台中的值，就像这样，它只显示页面中的复选框。这是我的代码。
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>
推荐答案
尝试下面的代码，它的工作..并确保它会对你有帮助...，我已经使用bootstape类，所以它会看起来很好& align！..
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....,
这篇关于试图动态添加复选框不会显示UI中的值，但会显示在控制台中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
