尝试动态添加复选框不会显示 UI 中的值,但会在控制台中显示
Trying to add checkbox dynamically does not display the value in UI but in console it is displayed
我正在尝试动态添加复选框,其 value.I"m 能够在控制台中看到值,就像这样,它只显示 page.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'}).html('hello').appendTo(container);
}
</script>
您必须像这样为每个复选框关联一个 <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
试试下面的代码,它正在工作..肯定会对你有所帮助...,我使用了 bootstape class,所以它看起来很好并且对齐了..
<!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>
我更新了一些代码...在控制台中显示选中的输入值....,
我正在尝试动态添加复选框,其 value.I"m 能够在控制台中看到值,就像这样,它只显示 page.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'}).html('hello').appendTo(container);
}
</script>
您必须像这样为每个复选框关联一个 <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
试试下面的代码,它正在工作..肯定会对你有所帮助...,我使用了 bootstape class,所以它看起来很好并且对齐了..
<!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>
我更新了一些代码...在控制台中显示选中的输入值....,