javascript - 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 变量 ID ($extra->id) 可能非常不同，因此 javascript 中的 for 循环已经消失。每个复选框只需要显示/隐藏与其关联的特定“额外信息”div。

如何修改以下代码以使其独立适用于每个单独的 $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 中添加了一个 id，因为它的遗漏是我的复制错误。我需要解决的问题是会有多个复选框(它们实际上在表中，而不是 <p> ，但我试图使代码可读)。每个复选框都与一个 $extra 关联，每个 $extra 都有自己的 div，在选中该复选框时需要显示该 div。

Answer 1

您的代码中有一些错误。

1. 您不能复制 id值(value)观。你正在做。改变它的类别。
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。