我试图从类似的按钮获取数据值,但是,只有在选择它们时才会这样:
<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" id="valueGenre" value="">
我有这个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())
});
我的代码存在什么问题,因为控制台没有错误?
答案 0 :(得分:3)
我假设你想要输入的所有值。为简单起见,我使用逗号进行简单连接。
以下是您应该使用的代码:
$('#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(','));
});
&#13;
<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>
&#13;
答案 1 :(得分:0)
首先 我认为你在
中缺少名称为id<input type="hidden" name="valueGenre" value="">
并使用
$("#valueGenre").val($(this).val());
你应该在输入隐藏
中添加id <input type="hidden" name="valueGenre" id="valueGenre" value="">
我刚刚将输入更新为标签并更改了val以附加以更好地解释错误:请参阅下面的代码:
$.each($("#genreButtons input:checked"), function()
{
$("#valueGenre").append($(this).attr('data-value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="genreButtons">
<label for="genre2" class="btn btn-default">Button 1<input checked="" 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 checked="" data-value="7" name="genre7" id="genre7" type="checkbox"></label>
</div>
<label name="valueGenre" id="valueGenre" > </label>