Как удалить флажки после сопоставления значений с помощью jQuery?

У меня есть 4 флажка, если я выберу 1 флажок, я получу 1 или более дополнительных значений, а если я выберу 2-й флажок, я получу 1 или более дополнительных значений. Вот моя проблема. Если я сниму флажок 1-й флажок, я должен удалить неотмеченные значения флажка, а не значения второго флажка().

$('.search-box1').on("click", function(e) {

  var inputVal1 = $(this).val();
  var cars = ["Saab", " Volvo", " BMW", " ABC", " HONDA", " TVS"];
  $(".arrVal").html(cars);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="row">
  <div>
    <label>First Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="First Page">
  </div>

  <div>
    <label>Second Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="Second Page">
  </div>

  <div>
    <label>Third Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="Third Page">
  </div>

  <div>
    <label>Fourth Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="Fourth Page">
  </div>
</div>

<div class="arrVal"></div>

Не могли бы вы объяснить больше или привести примеры того, чего вы пытаетесь достичь. А также опубликуйте свой существующий код js.

Eddie 22.05.2019 12:01

бро как поставить js отдельно? Также поставьте плагин jQuery 2.20

Samson 22.05.2019 12:08

Отредактировано. Чего именно вы пытаетесь достичь? Вы хотите показать значение выбранных флажков на #arrVal? :)

Eddie 22.05.2019 12:09

Например, первый флажок, связанный со значениями массива «Saab», «Volvo», «BMW», и второй флажок, связанный с «ABC», «HONDA», «TVS». Если я выберу первый флажок, я получу «Saab», « Volvo", "BMW" и если выбрать второй флажок, я получу "ABC", "HONDA", "TVS" вместе со значениями первого флажка... Теперь моя проблема заключается в том, что если я сниму второй флажок, я должен сохранить первый флажок значения, но это происходит.

Samson 22.05.2019 12:13
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
4
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
  • Вы можете построить свою переменную cars как объект. Использование флажка значение как ключ.
  • Используйте change как событие
  • Используйте селектор $('.search-box1:checked'), чтобы проверить все .search-box1, и используйте map, чтобы просмотреть объекты.
  • Используйте join(), чтобы преобразовать массив в строку (через запятую).

$('.search-box1').on("change", function(e) {

  var inputVal1 = $(this).val();
  var cars = {
    value1: ["Saab", "Volvo", "BMW"],
    value2: ["ABC", "HONDA", "TVS"],
    value3: [],
    value4: [],
    value5: [],
  }

  var result = $('.search-box1:checked').map(function() {
    return cars[this.value] || [];
  }).get();

  $(".arrVal").html(result.join());

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="row">
  <div>
    <label>First Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="value1">
  </div>

  <div>
    <label>Second Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="value2">
  </div>

  <div>
    <label>Third Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="value3">
  </div>

  <div>
    <label>Fourth Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="value4">
  </div>
</div>

<div class="arrVal"></div>

В этом я получаю данные Live из базы данных, что означает динамические значения.

Samson 22.05.2019 12:31

Вот так широко. Вы должны сообщить подробности. :)

Eddie 22.05.2019 12:32

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