从选定的 Bootstrap 按钮组(复选框)获取数据值并分配给输入 [英] Get Data-Values from Selected Bootstrap Button Group (Checkboxes) and Assign to Input
问题描述
我正在尝试从与此类似的按钮中获取数据值,但是,仅当它们被选中时:
<label for="genre2" class="btn btn-default">Button 1<input data-value="2" name="genre2" id="genre2" type="checkbox"></label><label for="genre4" class="btn btn-default">Button 2<input data-value="4" name="genre4" id="genre4" type="checkbox"></label><label for="genre5" class="btn btn-default">Button 3<input data-value="5" name="genre5" id="genre5" type="checkbox"></label><label for="genre7" class="btn btn-default">Button 4<input data-value="7" name="genre7" id="genre7" type="checkbox"></label>
我正在尝试为此输入分配值:
我有这个 JQuery,但是它不起作用:
$.each($("#genreButtons input:active"), function(){$("#valueGenre").val($(this).val());console.log($(this).val())});
我也试过这个 JQuery:
$('#genreButtons').click(function(){$("#valueGenre").val($(this).val());console.log($(this).val())});
我的代码有什么问题,因为没有向控制台抛出错误?
我假设您想要该输入的所有值.为简单起见,我使用带逗号的简单连接.
这是您应该使用的代码:
$('#genreButtons').find('input').on('change', function() {var val = [];$('#genreButtons').find('input:checked').each(function() {val.push($(this).data('value'));});$('input[name="valueGenre"]').val(val.join(','));});
jsfiddle 下方或上的完整代码段.
$('#genreButtons').find('input').on('change', function() {var val = [];$('#genreButtons').find('input:checked').each(function() {val.push($(this).data('value'));});$('input[name="valueGenre"]').val(val.join(','));$('#debug').html(val.join(','));});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="btn-group" data-toggle="buttons" id="genreButtons"><label for="genre2" class="btn btn-default">按钮 1<input data-value="2" name="genre2" id="genre2" type="checkbox">标签><label for="genre4" class="btn btn-default">按钮 2<input data-value="4" name="genre4" id="genre4" type="checkbox">标签><label for="genre5" class="btn btn-default">按钮 3<input data-value="5" name="genre5" id="genre5" type="checkbox">标签><label for="genre7" class="btn btn-default">按钮 4<input data-value="7" name="genre7" id="genre7" type="checkbox">标签>
<input type="hidden" name="valueGenre" value=""><div id="debug"></div>
I'm trying to get the data-value from buttons similar to this, however, only when they are selected:
<div class="btn-group" data-toggle="buttons" id="genreButtons">
<label for="genre2" class="btn btn-default">Button 1<input data-value="2" name="genre2" id="genre2" type="checkbox"></label>
<label for="genre4" class="btn btn-default">Button 2<input data-value="4" name="genre4" id="genre4" type="checkbox"></label>
<label for="genre5" class="btn btn-default">Button 3<input data-value="5" name="genre5" id="genre5" type="checkbox"></label>
<label for="genre7" class="btn btn-default">Button 4<input data-value="7" name="genre7" id="genre7" type="checkbox"></label>
</div>
I'm trying to assign the value(s) to this input:
<input type="hidden" name="valueGenre" id="valueGenre" value="">
I have this JQuery, however, it does not work:
$.each($("#genreButtons input:active"), function()
{
$("#valueGenre").val($(this).val());
console.log($(this).val())
});
I've also tried this JQuery:
$('#genreButtons').click(function(){
$("#valueGenre").val($(this).val());
console.log($(this).val())
});
What's the issue with my code, as no errors are thrown to the console?
I'm assuming you want all the values to that input. For the sake of simplicity, I am using a simple join with comma.
Here is the code you should use:
$('#genreButtons').find('input').on('change', function() {
var val = [];
$('#genreButtons').find('input:checked').each(function() {
val.push($(this).data('value'));
});
$('input[name="valueGenre"]').val(val.join(','));
});
Full snippet below or on jsfiddle.
$('#genreButtons').find('input').on('change', function() {
var val = [];
$('#genreButtons').find('input:checked').each(function() {
val.push($(this).data('value'));
});
$('input[name="valueGenre"]').val(val.join(','));
$('#debug').html(val.join(','));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="genreButtons">
<label for="genre2" class="btn btn-default">Button 1
<input data-value="2" name="genre2" id="genre2" type="checkbox">
</label>
<label for="genre4" class="btn btn-default">Button 2
<input data-value="4" name="genre4" id="genre4" type="checkbox">
</label>
<label for="genre5" class="btn btn-default">Button 3
<input data-value="5" name="genre5" id="genre5" type="checkbox">
</label>
<label for="genre7" class="btn btn-default">Button 4
<input data-value="7" name="genre7" id="genre7" type="checkbox">
</label>
</div>
<input type="hidden" name="valueGenre" value="">
<div id="debug"></div>
这篇关于从选定的 Bootstrap 按钮组(复选框)获取数据值并分配给输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!