从多个复选框中获取值并将其附加到html？ [英] Get the values from the multiple checkbox and append it to html?
问题描述
我正在使用来自twitter bootstrap的模态，我想制作一个模态，当用户点击按钮时，它会显示带有特定值的复选框，并且当模态隐藏添加到我的html的值时（在a.btn）..
I'm using the modal from twitter bootstrap, i want to make a modal that when a user click on button it appear with checkboxes that have a specific values, and when modal hide the values added to my html ( next to the a.btn ) ..
这里是html
<body>
<!-- Get the button problem -->
<!-- Button to trigger modal -->
启动演示模式
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<label for="value">
<input type="checkbox" name="value1" value="1">value1
</label>
<label for="value">
<input type="checkbox" name="value2" value="2">value2
</label>
<label for="value">
<input type="checkbox" name="value3" value="3">value3
</label>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
这是我的剧本：
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#myModal .btn').last().on('click', function(){
var checkbox_val = $('input:checkbox:checked').val();
var MyModal = $('#myModal');
function get_value() {
var allVals = [];
$('input:checkbox:checked').each(function() {
allVals.push(checkbox_val);
});
$('a.btn').after("<p>" + allVals + "</p>");
}
MyModal.modal('hide').on('hidden', function(){
get_value();
})
});
});
</script>
编辑
以下是我选择时allVals的值所有复选框
[1，1，1]
Edit Here is the value for allVals when i choose all checkbox ["1", "1", "1"]
我希望价值为
[1， 2，3]
I want the value to be ["1", "2", "3"]
推荐答案
我认为问题在于你做 allVals.push（ checkbox_val）; 在 .each 循环内，你一直在推动相同的值，这就是你得到[1,1,1]的原因。所以更新你的jQuery：
I think the problem is when you do allVals.push(checkbox_val); inside the .each loop, you are pushing the same value all the times, that's why you got [1,1,1]. So update your jQuery:
jQuery(document).ready(function($) {
$('#myModal .btn').last().on('click', function(){
var MyModal = $('#myModal');
function get_value() {
var allVals = [];
$('input:checkbox:checked').each(function() {
allVals.push($(this).val()); //Use the $('this') selector
});
$('a.btn').after("<p>" + allVals + "</p>");
}
MyModal.modal('hide').on('hidden', function(){
get_value();
})
});
});
这篇关于从多个复选框中获取值并将其附加到html？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
