Menggunakan JavaScript untuk menambah ikon untuk menogol acara butang

Question

fungsi toggledDeleteAllBtn(){
        if( $('.customer_checkbox:checked').panjang > 0){
            $('#sel_button').text('Deled all selected('+$('.customer_checkbox:checked').length+')');
          
        }lain{
            $('#sel_button').text('Padam semua yang dipilih');
        }

        
    }

            
                ID
                nombor telefon
                remarks
                tarikh
                
                
                Padam semua 
        

            

请问如何将 iclass 中的图标垃圾添加到函数 toggleDeleteAllBtn() 中, 以便 无论 进行 什么 更改, 图标 始终 显示？ (需要 在 & lt; code & gt; toggledeleteallbtn () & lt;/code & gt;
谢谢！
            

Answer 1

Saya menggunakan jawapan Mamun sebagai rujukan dan kembali kepada ikon yang saya suka. (Baru menyedari Mamun telah memadamkan jawapan asalnya kerana dia menggunakan fon Awesome dan bukannya glyphicon. Bagaimanapun, terima kasih banyak kerana memberi saya idea ini!)

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>