CODEWITHSUNDEEP
javascripthtmljqueryif-statement
whatever
whatever

Reputation: 157

The if/else statement

I want to show a suitable button with if/else statement. For example, when none of the checkboxes are checked I want to display the disabled button, but when one or more checkboxes are checked I want to display another button.

Js

 $("#checkAll").change(function () {
        $("input:checkbox").prop('checked', $(this).prop("checked"));
    });

Html

 <input type="checkbox" id="checkAll" style="margin-left:-10px" />
 <input type="checkbox"  style="margin-left:5px" />
 <input type="checkbox"  style="margin-left:5px" />


<div class="ml-2">
               if(checked){
                <button type="button" class="btn btn-danger ">Delete</button>
               }else{
                <button type="button" class="btn btn-outline-danger" disabled>Delete</button>
                }
            </div>

Upvotes: 1

Views: 201

Answers (3)

Rounin
Rounin

Reputation: 29453

If - as outlined - you want to have two buttons (rather than, say, one button where you change the classes and properties) you can:

  1. listen for when one of the checkboxes changes
  2. then check the collective state of all the checkboxes
  3. then, depending on that collective state, apply:
  • Element.classList.add('show')
  • Element.classList.remove('show')

to show and hide the respective buttons.

Working Example:

// DECLARE VARIABLES
const btnDanger = document.querySelector('.btn-danger');
const btnOutlineDanger = document.querySelector('.btn-outline-danger');
const checkBoxes = document.querySelectorAll('input[type="checkbox"]');


// FUNCTION: REVIEW CHECKBOXES
const reviewCheckBoxes = () => {

  let allUnchecked = true;
  
  checkBoxes.forEach((checkBox) => {

    if (checkBox.checked) {

      allUnchecked = false;
    }
  });
  
  if (allUnchecked === true) {
  
    btnDanger.classList.remove('show');
    btnOutlineDanger.classList.add('show');
  }
  
  else if (allUnchecked === false) {

    btnDanger.classList.add('show');
    btnOutlineDanger.classList.remove('show');
  }
}


// ADD EVENT LISTENERS TO EACH OF THE CHECKBOXES
checkBoxes.forEach((checkBox) => {

  checkBox.addEventListener('change', reviewCheckBoxes);

});
input[type="checkbox"] {
 margin-left: 10px;
}

.btn-danger,
.btn-outline-danger,
input[type="checkbox"]#checkAll {
 margin-left: 10px;
}

.btn-danger,
.btn-outline-danger {
  display: none;
}

.btn-danger.show,
.btn-outline-danger.show {
  display: inline-block;
}
<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" />

<button type="button" class="btn btn-danger ">Delete</button>
<button type="button" class="btn btn-outline-danger show" disabled>Delete</button>

Upvotes: 1

MaZoli
MaZoli

Reputation: 1533

As long the button is right next to the other button you don't even need no javascript for that. Thats of course quite a simple approach and can easily be 'hacked' via the Inspector. But if you do it with Javascript it can be hacked as well.

.checkbox + .button {
  opacity: 0.5;
  pointer-events: none;
}

.checkbox:checked + .button {
  display: none;
}

.checkbox + .button + .button2 {
  display: none;
}

.checkbox:checked + .button + .button2 {
  display: block;
}
<input type="checkbox" class="checkbox">
<div class="button">Button 1</div>
<div class="button2">Button 2</div>

Upvotes: 4

fdomn-m
fdomn-m

Reputation: 28611

When none of the checkboxes are checked I want to display the disabled button, but when 1 or more checkbox are checked I want to display another button.

You can include both buttons in the html with one hidden - then in your js show/hide them as appropriate.

A basic implementation would to check:

if ($("input:checkbox:checked").length == 0) {

then use .show() .hide() on each of the buttons as required.

This can be made more streamlined, eg using .toggle($("input:checkbox:checked").length == 0) but this is to show the explicit if/else as requested in the title.

$("#checkAll").change(function() {
  $("input:checkbox").prop('checked', $(this).prop("checked"));
});

$("input:checkbox").change(function() { 
  if ($("input:checkbox:checked").length == 0) {
    $(".ml-2>.btn-danger").hide();
    $(".ml-2>.btn-outline-danger").show();
  } else {
    $(".ml-2>.btn-outline-danger").hide();
    $(".ml-2>.btn-danger").show();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" />


<div class="ml-2">
  <button type="button" class="btn btn-danger " style='display:none;' >Delete</button>
  <button type="button" class="btn btn-outline-danger" disabled>Delete (disabled)</button>
</div>

Upvotes: 1

Related Questions