javascript - 如何使删除按钮仅在选中一个或多个复选框时可见

Question

//not getting any response from this code
if ($('#DesignationTable input[class=Organization_Desg_Check_margin]:checked').length) {
  alert("check box is selected");
}
//code to select all check boxes
$(document).ready(function() {
  $('input[name="Main_Checkbox"]').change(function() {
    if (this.checked) {
      var checkBoxes = $('.Organization_Desg_Check_margin');
      checkBoxes.prop('checked', true);
    } else {
      var checkBoxes = $('.Organization_Desg_Check_margin');
      checkBoxes.prop('checked', false);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="DesignationTable">
  <input type="checkbox" name="Main_Checkbox" id="check_all" class="mt-1 ml-1" />

  <input type="checkbox" value="Organization_Desg_row1" class="Organization_Desg_Check_margin" id="OrganizationDesgCheckData1" />
  <input type="checkbox" value="Organization_Desg_row2" class="Organization_Desg_Check_margin" id="OrganizationDesgCheckData2" />
  <input type="checkbox" value="Organization_Desg_row3" class="Organization_Desg_Check_margin" id="OrganizationDesgCheckData3" />
  <input type="checkbox" value="Organization_Desg_row4" class="Organization_Desg_Check_margin" id="OrganizationDesgCheckData4" />
</div>

我有一个表，每行都由一个复选框组成，只有在选中任何一个或多个复选框时，删除选项需要显示

标签： javascripthtmljquerycss

Answer 1

代表

将“删除”更改为删除按钮的 ID

$(function() {
  $("#DesignationTable").on("click", function() {
    $("#delete").toggle($(this).find(".Organization_Desg_Check_margin:checked").length > 0);
  })
  $('input[name="Main_Checkbox"]').on("click", function() {
    $('.Organization_Desg_Check_margin').prop('checked', this.checked);
  });
 
});

#delete { display:none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="DesignationTable">

  <button type="button" id="delete">Delete</button>

  <input type="checkbox" name="Main_Checkbox" id="check_all" class="mt-1 ml-1" />

  <input type="checkbox" value="Organization_Desg_row1" class="Organization_Desg_Check_margin" id="OrganizationDesgCheckData1" />
  <input type="checkbox" value="Organization_Desg_row2" class="Organization_Desg_Check_margin" id="OrganizationDesgCheckData2" />
  <input type="checkbox" value="Organization_Desg_row3" class="Organization_Desg_Check_margin" id="OrganizationDesgCheckData3" />
  <input type="checkbox" value="Organization_Desg_row4" class="Organization_Desg_Check_margin" id="OrganizationDesgCheckData4" />
</div>