Оператор if/else

ProgramBox

Оператор if/else

Post author:admin
Запись опубликована:13 января, 2022
Post category:Вопросы по программированию

#javascript #html #jquery #if-statement

Вопрос:

Я хочу показать подходящую кнопку с оператором if/else. Например, когда ни один из флажков не установлен, я хочу отобразить отключенную кнопку, но когда установлен один или несколько флажков, я хочу отобразить другую кнопку.

  $("#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>

1. Включите обе кнопки в html (без if(checked) ) с одной скрытой — затем в вашем js покажите/скройте их соответствующим образом

2. Существуют ли отдельные кнопки или одна и та же disabled кнопка с измененным состоянием? Будет ли одна кнопка работать для ваших нужд?

Ответ №1:

До тех пор, пока кнопка находится рядом с другой кнопкой, для этого даже не нужен javascript. Это, конечно, довольно простой подход, и его можно легко «взломать» с помощью инспектора. Но если вы сделаете это с помощью Javascript, он также может быть взломан.

 .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>

1. Это не то, к чему я стремлюсь, должна отображаться кнопка «отключено», а затем, когда ввод проверен, должна отображаться другая кнопка вместо «отключено».

2. Это аккуратное решение, не связанное с javascript, просто нуждается в расширении для конкретного сценария

3. Я просто добавил немного кода, чтобы он соответствовал вашему сценарию.

Ответ №2:

Когда ни один из флажков не установлен, я хочу отобразить отключенную кнопку, но когда установлен 1 или более флажков, я хочу отобразить другую кнопку.

Вы можете включить обе кнопки в html с одной скрытой — затем в вашем js показать/скрыть их соответствующим образом.

Базовая реализация позволила бы проверить:

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

затем используйте .show() .hide() каждую из кнопок по мере необходимости.

Это можно сделать более упрощенным, например, используя .toggle($("input:checkbox:checked").length == 0) , но это для того, чтобы показать явное «если» / «иначе», как указано в заголовке.

 $("#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>

Ответ №3:

Если, как указано выше, вы хотите иметь две кнопки (а не, скажем, одну кнопку, с помощью которой вы меняете классы и свойства), вы можете:

прислушайтесь, когда произойдет одно из checkboxes изменений
затем проверьте коллективное состояние всех checkboxes
затем, в зависимости от этого коллективного состояния, примените:

Element.classList.add('show')
Element.classList.remove('show')

для отображения и скрытия соответствующих кнопок.

Рабочий Пример:

 // 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>

Метки: Оператор if/else