Using JavaScript to add an icon to toggle button events
P粉541565322
2023-09-05 00:08:30
<p><pre class="brush:js;toolbar:false;">function toggledDeleteAllBtn(){
if( $('.customer_checkbox:checked').length > 0){
$('#sel_button').text('Deleted all selected(' $('.customer_checkbox:checked').length ')');
}else{
$('#sel_button').text('Delete all selected');
}
}
</pre>
<pre class="brush:html;toolbar:false;"> <tr id="sid">
<th>ID</th>
<th>phone number</th>
<th>remarks</th>
<th>date</th>
<th></th>
<th><input type="checkbox" name="main-checkbox"></th>
<th><button class="btn btn-danger btn-sm" id="sel_button" name="sel_button" ><i class="glyphicon glyphicon-trash" id="trash_icon"></i>Delete all </button></th>
</tr>
</pre>
<p>请问如何将 iclass 中的图标垃圾添加到函数 <code>toggleDeleteAllBtn()</code> 中，以便无论进行什么更改，图标始终显示？ （需要在<code>toggleDeleteAllBtn()</code>中进行一些修改）
谢谢！</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I used Mamun's answer as a reference and went back to the icons I liked. (Just realized Mamun had deleted his original answer because he was using font Awesome instead of glyphicon. Anyway, thank you so much for giving me these ideas!)
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>