獲取由選中的復選框創建的多個按鈕的值

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>

Answer 1

對於第二個和第三個，您附加的是類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>