Question 35801 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

I need to show a Delete Button when a check box or a button is clicked – Jquery

// Detele Videos
var checkboxes = $("input[type='checkbox']"),actions = $("#actions");
checkboxes.click(function () {
    actions.attr("hidden", !checkboxes.is(":checked"));
});

// Delete All Videos
var checked = false;
$('.select-all').on('click', function () {
    if (checked == false) {
        $('.settings').prop('checked', true);
        checked = true;
    } else {
        $('.settings').prop('checked', false);
        checked = false;
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show / Hide a Button onclick</title>
</head>
<body>
    <div class="col-md-9 dl-dir-block">
        <div class="card">
            <div class="card-body">
                <button class="select-all btn btn-primary">Select All</button>
                <input type="checkbox" id="selectCheckbox" class="btn btn-primary">
                <input type="submit" id="actions" class="btn btn-primary settings" value="Delete" hidden>
            </div>
        </div>
    </div>
</body>
</html>

Condition1:

When the checkbox is checked I need to show a Delete Button, if not checked then I need to hide the button.

Condition 2:

There is a button called Select All even if I click on this button also I need to show the Delete Button else I need to hide the button

Currently, only one condition is getting satisfied, but I need to satisfy both conditions at the same time like when I click on the checkbox or on the Select All Button I need to show a Delete Button.

If non of the checkbox is checked then I need to hide the Delete Button.

I need to satisfy both conditions within the same logic itself.

Tags:

2

Answers


  1. 0

    Check below code, this considers possibility of multiple check boxes.

    var checkboxes = $("input[type='checkbox']"),
       actions = $("#actions");

checkboxes.click(function() {
  ToggleDeleteButton();
});

// Delete All Videos
$('.select-all').on('click', function() {
    checkboxes.prop("checked", true);
    ToggleDeleteButton();
});

function ToggleDeleteButton() {
    actions.attr("hidden", true);
    $.each(checkboxes, function(index, item){
      if($(item).is(":checked")) {
          actions.attr("hidden", false);
          return false;
      }
  });
}
    Login or Signup to reply.
  2. 0

    You can do it by changing some codes in your javascript. Do not need the condition "checked == true" since the "Select All" button does check the checkbox and doesn’t do anything if the checkbox is checked.

    Here’s the full code.

    var checkboxes = $("input[type='checkbox']");
var actions = $("#actions");
var checked = false;

checkboxes.click(function() {
  actions.attr("hidden", !checkboxes.is(":checked"));
  checked = checkboxes.is(":checked");
});

// Delete All Videos
$('.select-all').on('click', function() {
  if (checked == false) {
    $('#selectCheckbox').prop('checked', true);
    actions.attr("hidden", !checkboxes.is(":checked"));
    checked = true;
  }
});
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Show / Hide a Button onclick</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div class="col-md-9 dl-dir-block">
    <div class="card">
      <div class="card-body">
        <button class="select-all btn btn-primary">Select All</button>
        <input type="checkbox" id="selectCheckbox" class="btn btn-primary">
        <input type="submit" id="actions" class="btn btn-primary settings" value="Delete" hidden>
      </div>
    </div>
  </div>
</body>

</html>

    FYI: You may need to change the "Select All" button text to "Deselect All" after the "Select All" button is clicked.

    You can use the following code:

    var checkboxes = $("input[type='checkbox']");
var actions = $("#actions");
var checked = false;

checkboxes.click(function() {
  actions.attr("hidden", !checkboxes.is(":checked"));
  checked = checkboxes.is(":checked");
  if (checked == false) {
    $('.select-all').text("Select All");
  } else {
    $('.select-all').text("Deselect All");
  }
});

// Delete All Videos
$('.select-all').on('click', function() {
  checkboxes.click();
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search