使用 JavaScript 添加图标来切换按钮事件
P粉541565322
P粉541565322 2023-09-05 00:08:30
0
1
532
<p><pre class="brush:js;toolbar:false;">函数toggledDeleteAllBtn(){ if( $('.customer_checkbox:checked').length > 0){ $('#sel_button').text('删除所有选中的('+$('.customer_checkbox:checked').length+')'); }别的{ $('#sel_button').text('删除所有选中的'); } } </前> <pre class="brush:html;toolbar:false;"> <tr id=“sid”> 第<第>ID个 第<第>个电话号码个 <第>备注 <第>日期 <第></第> <输入类型=“复选框” name="main-checkbox"></th> <th><按钮类=“btn btn-danger btn-sm” id="sel_button";名称=“sel_button” ><i class=“glyphicon glyphicon-trash” id="trash_icon"></i>删除所有</button></th> </前>

请问如何将 iclass 中的图标填充添加到函数 toggleDeleteAllBtn() 修改,以便显示无论进行什么更改,图标始终? (需要在toggleDeleteAllBtn()中进行一些) 谢谢!</p>

P粉541565322
P粉541565322

全部回复(1)
P粉106301763

我以 Mamun 的答案作为参考,用回了我喜欢的图标。 (刚刚意识到 Mamun 已经删除了他原来的答案,因为他使用的是 font Awesome 而不是 glyphicon。无论如何,非常感谢你给我这些想法!)

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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板