jQuery показать/скрыть конкретный div с флажком

Question

Хорошо, у меня проблема с некоторым кодом, и я действительно не уверен, как закодировать результат, который я хочу достичь.

Я работаю над сайтом с использованием Laravel 5.2, и у меня возникла проблема со скрытием и отображением определенных div, основанных на статусе флажка. Они находятся в цикле @foreach, но я уверен, что laravel/@ foreach не проблема, это отсутствие опыта jQuery.

Итак, вот какой-то код.

@foreach ($event->extras()->get() as $extra) 
    <p>{{ $extra->name }}</p> 
    <p>{{ $extra->cost }}</p> 
    <p><input type="checkbox" name="extra-checkbox" id="extra-checkbox" value=""></p> 
    <div id="extra-info"> 
     @if ($extra->infoRequired == "1") 
      <input type="text" name="extra-info-text" class="form-control"> 
     @endif 
    </div> 
@endforeach  

Проблема у меня в том, что ($ экстра-> идентификатор) в $ EXTRA идентификатор переменной в цикле может быть очень отличается поэтому для петли в JavaScript отсутствует. Каждому флажку необходимо показать/скрыть только конкретный раздел «дополнительная информация», с которым он связан.

Как изменить следующий код, чтобы он работал отдельно для каждого отдельного $ extra? Я рассмотрел вопрос о добавлении $ extra-> id в класс или div id, но я не могу понять, как его реализовать в javascript.

$(document).ready(function() { 
    $('#extra-checkbox').change(function() { 
     if(this.checked) 
      $('#extra-info').fadeIn('fast'); 
     else 
      $('#extra-info').fadeOut('fast');  

Редактировать Я добавил идентификатор в HTML, как это упущение было мое копирование ошибок. Проблема, о которой я хочу рассказать, заключается в том, что будет несколько флажков (они фактически находятся в таблице, а не <p>, но я пытался сделать код доступным для чтения). Каждый флажок связан с $ extra, и каждый $ extra имеет свой собственный div, который нужно показывать, когда флажок установлен.

Answer 1

У вас нет ввода с идентификатором экстра-флажком, попробуйте следующее:

$('input[name="extra-checkbox"]').change(function() { 
    if(this.checked) { 
     $('#extra-info').fadeIn('fast'); 
    } else { 
     $('#extra-info').fadeOut('fast'); 
    } 
}); 

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

Answer 2

В коде есть несколько ошибок.

1. Вы не могут дублировать id значения. Вы это делаете. Измените класс.
2. Не ставьте <input /> внутри <p>, вместо этого оберните его внутри <label>.
3. Использование $('#extra-checkbox') не работает, т.к. name нет id. Используйте $('[name="extra-checkbox"]').
4. Это можно сделать с помощью самого CSS. Смотри ниже.

Смотрите рабочий пример здесь:

input[name="extra-checkbox"] + input[name="extra-info-text"] {display: none;} 
 
input[name="extra-checkbox"]:checked + input[name="extra-info-text"] {display: inline;}

<div class="entry"> 
 
    <p>Name 1</p> 
 
    <p>Cost 1</p> 
 
    <div class="form-stuff"> 
 
    <input type="checkbox" name="extra-checkbox" value=""> 
 
    <input type="text" name="extra-info-text" class="form-control"> 
 
    </div> 
 
</div> 
 
<div class="entry"> 
 
    <p>Name 2</p> 
 
    <p>Cost 2</p> 
 
    <div class="form-stuff"> 
 
    <input type="checkbox" name="extra-checkbox" value=""> 
 
    <input type="text" name="extra-info-text" class="form-control"> 
 
    </div> 
 
</div> 
 
<div class="entry"> 
 
    <p>Name 3</p> 
 
    <p>Cost 3</p> 
 
    <div class="form-stuff"> 
 
    <input type="checkbox" name="extra-checkbox" value=""> 
 
    <input type="text" name="extra-info-text" class="form-control"> 
 
    </div> 
 
</div> 
 
<div class="entry"> 
 
    <p>Name 4</p> 
 
    <p>Cost 4</p> 
 
    <div class="form-stuff"> 
 
    <input type="checkbox" name="extra-checkbox" value=""> 
 
    <input type="text" name="extra-info-text" class="form-control"> 
 
    </div> 
 
</div>

Вам не нужно JQuery или JavaScript для этого.

Answer 3

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

также:

$('#extra-checkbox') 

должен быть таким:

$('*[name="extra-checkbox"]') 

Это должно работать:

@foreach ($event->extras()->get() as $extra) 
     <p>{{ $extra->name }}</p> 
     <p>{{ $extra->cost }}</p> 
     <p><input type="checkbox" name="extra-checkbox" value="{{ $extra->name }}"></p> 
     <div class="extra-info" data-name="{{ $extra->name }}"> 
      @if ($extra->infoRequired == "1") 
       <input type="text" name="extra-info-text" class="form-control"> 
      @endif 
     </div> 
@endforeach  

затем

$(document).ready(function() { 
    $('*[name="extra-checkbox"]').change(function() { 
     if($(this).prop('checked')) 
      $('.extra-info[data-name="'+$(this).data('name')+'"]').fadeIn('fast'); 
     else 
      $('.extra-info[data-name="'+$(this).data('name')+'"]').fadeOut('fast'); 

Answer 4

Использование pusedo selctors получить, если флажок установлен или нет

$(document).ready(function() { 
    $('#extra-checkbox').change(function() { 
     if($(this).is(":checked"){ //Return true/false 
      $('#extra-info').fadeIn('fast'); 
     } 
     else{ 
      $('#extra-info').fadeOut('fast'); 
    } 
}) 

EDIT после комментариев

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

$('div[id^="extra-checkbox"]') 

Для получения дополнительной информации посетите HERE

Примечание: идентификатор должен быть уникальным согласно стандарту W3C