Utilisation de JavaScript pour ajouter une icône pour basculer les événements du bouton

Question

fonction toggledDeleteAllBtn(){
        si( $('.customer_checkbox:checked').length > 0){
            $('#sel_button').text('Supprimé tous les éléments sélectionnés('+$('.customer_checkbox:checked').length+')');
          
        }autre{
            $('#sel_button').text('Supprimer tous les éléments sélectionnés');
        }

        
    }
≪/pré>
            
                ID
                numéro de téléphone
                remarques
                date
                
                
                Supprimer tout 
        

            ≪/tr>
≪/pré>
请问如何将 iclass 中的图标垃圾添加到函数 toggleDeleteAllBtn() 中，以便无论进行什么更改，图标始终显示？ （需要在toggleDeleteAllBtn()
谢谢！
            

Answer 1

J'ai utilisé la réponse de Mamun comme référence et je suis revenu aux icônes qui me plaisaient. (Je viens de réaliser que Mamun avait supprimé sa réponse originale parce qu'il utilisait la police Awesome au lieu de glyphicon. Quoi qu'il en soit, merci beaucoup de m'avoir donné ces idées !)

function toggledDeleteAllBtn() {
  if ($('.customer_checkbox:checked').length > 0) {
    $('#sel_button').html('<i class="glyphicon glyphicon-trash" </i>Delete all selected(' + $('.customer_checkbox:checked').length + ')');
  } else {
    $('#sel_button').html('<i class="glyphicon glyphicon-trash" </i>Delete all selected');
  }
}
$(document).on('click', '.customer_checkbox', toggledDeleteAllBtn);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
<script src="plugins/Jquery-Table-Check-All/dist/TableCheckAll.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>

<table>
  <tr id="sid">
    <th> ID </th>
    <th> phone number </th>
    <th> remarks </th>
    <th> date </th>
    <th></th>
    <th><input type="checkbox" class="customer_checkbox" name="main-checkbox"></th>
    <th><button class="btn btn-danger btn-sm" id="sel_button" name="sel_button"><i class="glyphicon glyphicon-trash" </i> Delete all selected</button></th>
  </tr>
</table>