javascript - 获取由选中的复选框创建的值多个按钮

Question

我想从按钮中获得价值。选中复选框时会出现此按钮。

如果只有一个按钮，没关系，但是当有这么多按钮时，它会获取最后一个按钮数据属性，这不好

$('#other-products').on('change', function() {
    var selectedProducts = [];
    var listProductsCtrl = $('.list-products');
    listProductsCtrl.html('');
    $('#other-products input[type="checkbox"]:checked').each(function() {
      selectedProducts.push($(this).attr('name'));
      var showtimesAsString = '<button class="number" data-label="'+$(this).attr('name')+'">'+selectedProducts.join('</button> <button class="test">')+'</button>';
      listProductsCtrl.html(showtimesAsString);
      
    });
    $('.number').click(function(){
    		
      	alert($(this).attr('data-label'));
      
      });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="other-products">
  <input type="checkbox" name="First" value="1">
  <input type="checkbox" name="Second" value="2">
  <input type="checkbox" name="Third" value="3">
</div>
<span class="list-products"></span>

标签： javascriptjqueryhtml

Answer 1

对于第 2 和第 3，您附加的是类test而不是数字，并且没有data-label属性

所以在这里我只是在这里显示text()。

$('#other-products').on('change', function() {
    var selectedProducts = [];
    var listProductsCtrl = $('.list-products');
    listProductsCtrl.html('');
    $('#other-products input[type="checkbox"]:checked').each(function() {
      selectedProducts.push($(this).attr('name'));
      var showtimesAsString = '<button class="number" data-label="'+$(this).attr('name')+'">'+selectedProducts.join('</button> <button class="test">')+'</button>';
      listProductsCtrl.html(showtimesAsString);
      
    });
    $('.number, .test').click(function(){
    		
      	alert($(this).text());
      
      });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="other-products">
  <input type="checkbox" name="First" value="1">
  <input type="checkbox" name="Second" value="2">
  <input type="checkbox" name="Third" value="3">
</div>
<span class="list-products"></span>