好的，我对某些代码有疑问，我真的不确定如何编写我想要实现的结果。
我正在使用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。 最佳答案
您的代码中有一些错误。
您不能复制id值。你正在做。更改类别。
不要将<input />放在<p>内，而是将其包装在<label>内。
使用$('#extra-checkbox')不起作用，因为它不是name，而是id。使用$('[name="extra-checkbox"]')。
这可以使用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。
关于javascript - jQuery显示/隐藏带有复选框的特定div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35113853/