Как отобразить элемент, когда установлен флажок с определенным значением?

Question

Есть три флажка, и я хочу показать «текст» под формой, когда «значение C» проверено. Когда установлен только флажок «Значение C», это похоже на работу. Но когда я отмечаю несколько флажков, например, «Значение A» и «Значение C», «текст» не появляется.

Я хотел бы отображать «текст» всякий раз, когда «Значение C» "проверено.

Примечание: я не могу изменить HTML код, так как он создается плагином WordPress.

$(function() {
  var $input = $('input[name="name123[data][]"]');
  $input.change(function() {
    if ($('input[name="name123[data][]"]:checked').val() === 'value-c') {
      $('.text').show();
    } else {
      $('.text').hide();
    }
  });
});

.text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <label><input type="checkbox" name="name123[data][]" value="value-a"><span class="mwform-checkbox-field-text">Value A</span></label>
  <label><input type="checkbox" name="name123[data][]" value="value-b"><span class="mwform-checkbox-field-text">Value B</span></label>
  <label><input type="checkbox" name="name123[data][]" value="value-c"><span class="mwform-checkbox-field-text">Value C</span></label>
</form>
<div class="text">
  display this text in case "Value C" is checked
</div>

Answer 1

Вы можете вставить значение в селектор, чтобы явно проверить этот ввод. Это некрасивый селектор, и, возможно, его можно сделать более эффективно, но он должен работать.

$('input[name="name123[data][]"]:checked[value="value-c"]').length

РЕДАКТИРОВАТЬ: На самом деле, глядя на ваши логики c, вы уже кэшировали входные данные в переменной, так что вы могли бы также сделайте ...

$input.filter('[value="value-c"]:checked').length

Это удалит дополнительный поиск DOM.

Answer 2

Вы можете выбрать ввод, используя атрибут value, например:

$(function() {
  $('input[name="name123[data][]"][value="value-c"]').change(function(e){
    $('.text').toggle($(e.target).is(':checked'))
  });
});

.text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <label><input type="checkbox" name="name123[data][]" value="value-a"><span class="mwform-checkbox-field-text">Value A</span></label>
  <label><input type="checkbox" name="name123[data][]" value="value-b"><span class="mwform-checkbox-field-text">Value B</span></label>
  <label><input type="checkbox" name="name123[data][]" value="value-c" class="input--c"><span class="mwform-checkbox-field-text">Value C</span></label>
</form>
<div class="text">
  display this text in case "Value C" is checked
</div>