Jquery Checkbox Checkbox Show/Hide Div, если два флажка установлены или сняты

У меня есть этот простой код jquery для флажка, который проверяет атрибуты. Я знаю, что на этот ответ уже есть много общего, но идея здесь другая.

Я хочу показать элемент A_B div для следующего условия:

# 1: Флажок пользователя checkedA или B показывает элемент A_B div

# 2: Если пользователь uncheckedA установлен, но флажок B все еще установлен. Затем элемент A_B div все еще отображается.

*Note: This can be reversal for the situation*

# 3 Если пользователь снял оба флажка A или B. Тогда скроется только элемент A_B div.

Прямо сейчас. Когда я снимаю галочку A или B. Элемент div будет скрыт, он не должен переключаться. Есть ли здесь что улучшить. Для достижения следующих 3 условий?

Любые идеи/решения были бы большим подспорьем. Может быть полезно также для некоторых пользователей, которые сталкиваются с той же проблемой, что и моя. Спасибо.

$('input[chck-type = "a_b"]').click(function(){
    if (
    $(this).prop("checked") == true
  ) {
      $('.A_B').removeClass('hide');
  } else {
    $('.A_B').addClass('hide');
  }
});

$('input[chck-type = "c"]').click(function(){
    if (
    $(this).prop("checked") == true
  ) {
      $('.C_Box').removeClass('hide');
  } else {
    $('.C_Box').addClass('hide');
  }
});

.hide {display:none}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type = "checkbox" chck-type = "a_b">A</p>
<p><input type = "checkbox" chck-type = "a_b">B</p>
<p><input type = "checkbox" chck-type = "c">C</p>


<div class='A_B hide'>
This box is for A or B.
</div>

<div class='C_Box hide'>
This box is for C.
</div>

javascript jquery checkbox

06.02.2023 04:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы не проверяете, сняты ли оба флажка или нет.

$('input[chck-type = "a_b"]').click(function(){
    if (
    $(this).prop("checked") == true
  ) {
      $('.A_B').removeClass('hide');
  } else if ($('input[chck-type = "a_b"]')[0].checked == false && $('input[chck-type = "a_b"]')[1].checked == false) {
    $('.A_B').addClass('hide');
  }
});

$('input[chck-type = "c"]').click(function(){
    if (
    $(this).prop("checked") == true
  ) {
      $('.C_Box').removeClass('hide');
  } else {
    $('.C_Box').addClass('hide');
  }
});

.hide {display:none}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type = "checkbox" chck-type = "a_b">A</p>
<p><input type = "checkbox" chck-type = "a_b">B</p>
<p><input type = "checkbox" chck-type = "c">C</p>


<div class='A_B hide'>
This box is for A or B.
</div>

<div class='C_Box hide'>
This box is for C.
</div>

06.02.2023 05:05

$('input[chck-type = "a_b"]').click(function(){
    let checkboxes = $('input[chck-type = "a_b"]:checked').length;
    if (
    checkboxes != 0
  ) {
      $('.A_B').removeClass('hide');
  } else {
    $('.A_B').addClass('hide');
  }
});

$('input[chck-type = "c"]').click(function(){
    if (
    $(this).prop("checked") == true
  ) {
      $('.C_Box').removeClass('hide');
  } else {
    $('.C_Box').addClass('hide');
  }
});

.hide {display:none}

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

<p><input type = "checkbox" chck-type = "a_b">A</p>
<p><input type = "checkbox" chck-type = "a_b">B</p>
<p><input type = "checkbox" chck-type = "c">C</p>


<div class='A_B hide'>
This box is for A or B.
</div>

<div class='C_Box hide'>
This box is for C.
</div>

06.02.2023 05:11

Просто измените свой JS на это, и все будет работать.

    $('input').on('click', function () {
      var a_b = $('input[chck-type = "a_b"]').is(':checked');
      if (!a_b) {
        $('.A_B').addClass('hide');
      } else {
        $('.A_B').removeClass('hide');
      }

      var c = $('input[chck-type = "c"]').is(':checked');
      if (!c) {
        $('.C_Box').addClass('hide');
      } else {
        $('.C_Box').removeClass('hide');
      }
    });

    .hide {
      display: none;
    }

    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <p><input type = "checkbox" chck-type = "a_b" />A</p>
    <p><input type = "checkbox" chck-type = "a_b" />B</p>
    <p><input type = "checkbox" chck-type = "c" />C</p>

    <div class = "A_B hide">This box is for A or B.</div>

    <div class = "C_Box hide">This box is for C.</div>

Пример: Stackblitz

06.02.2023 05:11

Другие вопросы по теме

Клавиша Esc для нажатия кнопки: работает, если в функции запущено предупреждение(); иначе Esc придется нажимать несколько раз

Как я могу узнать, пересекаются ли несколько строк?

Как добавить тег с классом и атрибутами внутри html-файла с помощью javascript или jquery?

Как я могу передать массив, полученный из «каждого», внутри функции «клик»?

Почему я не могу установить значение раскрывающегося списка после вызова AJAX?

Как запретить litepicker создавать несколько экземпляров

Как загрузить select selection-js данными из базы данных

Как узнать значение живой радиокнопки с помощью javascript

Текст HTML в диапазоне - теги не реализуются

Как можно упорядочить <DIV> по дате?

Jquery Checkbox Checkbox Show/Hide Div, если два флажка установлены или сняты

Ответы 3

Другие вопросы по теме

Похожие вопросы