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
  }
});

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

1 个答案: