如何在data-id属性中显示选中的复选框

Question

我找到了这段代码:

var checkboxes = $('input[type=checkbox]');
checkboxes.on('change', function() {
$('#divfilter').text(function() {
return checkboxes.filter(':checked').map(function() {
return this.name;
}).get()    
.join(', ') + '.';
});
});

<input type="checkbox" name="barbecue" id="barbecue" value="oui" class="barbecue" />
<input type="checkbox" name="handicap" id="handicap" value="oui" class="handicap" />
<input type="checkbox" name="animaux" id="animaux" value="oui" class="animaux" />
<div id="divfilter"></div>

它工作得很好，但我需要数据在这里显示在data-namevar="HERE":

<button
data-namevar="I NEED CHECKBOX CHECKED SHOW HERE"
class="add-to-cart btn_1 gradient medium full-width">Add to cart <i class="icon_bag_alt"></i>
</button>

怎么做?

Answer 1

你能试试吗?

var checkboxes = $('input[type=checkbox]');
checkboxes.on('change', function() {
$('#divfilter').text(function() {
return checkboxes.filter(':checked').map(function() {
return $(this).attr('data-namevar');
}).get()    
.join(', ') + '.';
});
});

Answer 2

现在，如何在html中准确地显示这些数据呢?

<button
data-namevar="I NEED CHECKBOX CHECKED NAMES SHOW HERE">
Add to cart
</button>