I need to show a Delete Button when a check box or a button is clicked-CodePudding

// 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 >
        <div >
            <div >
                <button >Select All</button>
                <input type="checkbox" id="selectCheckbox" >
                <input type="submit" id="actions"  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.

CodePudding user response：

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 >
    <div >
      <div >
        <button >Select All</button>
        <input type="checkbox" id="selectCheckbox" >
        <input type="submit" id="actions"  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();
});

CodePudding user response：

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