javascript - 至少选中一个复选框时显示图标

Question

我在表格中显示复选框。现在，当我选中至少一个复选框时，图标必须出现，如果没有，则应该隐藏。我的图标没有隐藏。 我做错了什么？

这是我的代码

<div class="row">
    <div class="col-sm-12 ">
    <a data-toggle="modal" id="btnAdd" data-target="#myModal" class="btn"> Add Items </a> 

    <i type="icon" class="fa fa-trash " ></i>


<div>   
</div>
<table class="table" id="table"> 
    <thead>
        <tr> 
          <th><input type="checkbox" id="master"></th>                           
        </tr>

    </thead>
<tbody>
 <td><input type="checkbox"></td>                           


//table data here
</tr>
@endforeach
</tbody>
</table>


var checkboxes = $("input[type='checkbox']"),
    hideIcon = $("i[type='icon']");

checkboxes.click(function() {
    hideIcon.attr("disabled", !checkboxes.is(":checked"));
});

Answer 1

您需要在每次点击时遍历所有复选框。另外，我建议使用 prop 函数来检查“已检查”状态。然后，要隐藏它，请使用 hide 函数，或将 display 属性设置为 hidden:

$("input[type='checkbox']").click(function() {
  var atLeastOneChecked = false;
  $("input[type='checkbox']").each(function(index) {
    if ($(this).prop('checked'))
      atLeastOneChecked = true;
  });
  if (atLeastOneChecked) {
    $("i[type='icon']").show(); //built-in jquery function
    //...or...
    $("i[type='icon']").css('display','inline-block'); //or set style explicitly
  } else {
    $("i[type='icon']").hide(); //built-in jquery function
    //...or...
    $("i[type='icon']").css('display','none'); //set style explicitly
  }
});