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

我遇到的问题是循环中$ $额外变量ID（$ extra-＆gt; id）可能非常不同，因此javascript中的for循环已经出局。每个复选框都需要显示/隐藏特定的＆＃34; extra-info＆＃34;与它相关的div。

如何修改以下代码以使其适用于每个额外的$ extra？我考虑过将$ extra-＆gt; id放入class或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，当选中复选框时需要显示它。

Answer 1

您的代码中存在一些错误。

您无法重复id个值。你这样做。改变它。
不要将<input />放在<p>内，而是将其包裹在<label>内。
使用$('#extra-checkbox')无效，因为name不是id。使用$('[name="extra-checkbox"]')。
这可以使用CSS本身完成。见下文。

请参阅此处的工作示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

你不需要jQuery或JavaScript。

Answer 2

您没有输入id extra-checkbox，请尝试：

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

或使用一个类，因为你不应该有一个具有相同id的元素。

Answer 3

您正在向多个div添加相同的ID，这很糟糕。您需要为每个元素添加唯一ID或唯一数据属性，并在更改事件中引用它。

此外：

$('#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'); 
    }
})

评论后编辑

您可以使用哪个是前缀选择器，这意味着以extra_checkbox开头的任何id都会响应此代码段。

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

有关详细信息，请访问HERE

注意：根据W3C标准，id必须是唯一的

jQuery用复选框显示/隐藏特定的div

4 个答案: