Javascript 具有数据库唯一ID依赖的条件表单元素的最佳实践

我正在处理一个包含许多条件字段的表单，这些字段根据复选框隐藏或显示，这些复选框本身来自表中的项

复选框看起来像这样

@foreach ($media as $medium)
        <div class="col-4 col-md-auto form-check form-check-inline media-checkbox-group required">
            <input class="form-check-input media-checkboxes" type="checkbox" name="media[{{ $medium->id }}]" value="{{ $medium->id }}" id="mediumId{{ $medium->id }}">
            <label class="form-check-label" for="{{ $medium->id }}">{{ $medium->type }}</label>
        </div>
@endforeach

$('#mediumId3').on("change", function () {
  var x = document.getElementById("block");
  if (this.checked) {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
});

<div id="block" style="display:none;">
  <div class="form-group row">
    <label for="poemCount" class="col-md-4 col-form-label text-md-right">{{ __('Require this many poems') }}</label>

    <div class="col-md-8">

      <div class="form-check form-check-inline">
        <label class="mr-1" for="countMin">{{ __('Min:') }}</label>
        <select class="form-control" id="countMin" name="countMin">
          <option value=""> -- </option>
          @foreach ($numbers as $number)
            <option value="{{ $number }}" {{$number == old("countMin") ? "selected": ""}}>{{ $number }}</option>
          @endforeach
        </select>
      </div>

    </div>

  </div>
</div>

我的html表单元素如下

@foreach ($media as $medium)
        <div class="col-4 col-md-auto form-check form-check-inline media-checkbox-group required">
            <input class="form-check-input media-checkboxes" type="checkbox" name="media[{{ $medium->id }}]" value="{{ $medium->id }}" id="mediumId{{ $medium->id }}">
            <label class="form-check-label" for="{{ $medium->id }}">{{ $medium->type }}</label>
        </div>
@endforeach

$('#mediumId3').on("change", function () {
  var x = document.getElementById("block");
  if (this.checked) {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
});

<div id="block" style="display:none;">
  <div class="form-group row">
    <label for="poemCount" class="col-md-4 col-form-label text-md-right">{{ __('Require this many poems') }}</label>

    <div class="col-md-8">

      <div class="form-check form-check-inline">
        <label class="mr-1" for="countMin">{{ __('Min:') }}</label>
        <select class="form-control" id="countMin" name="countMin">
          <option value=""> -- </option>
          @foreach ($numbers as $number)
            <option value="{{ $number }}" {{$number == old("countMin") ? "selected": ""}}>{{ $number }}</option>
          @endforeach
        </select>
      </div>

    </div>

  </div>
</div>

{{{{{（“需要这么多诗”）}
{{{{（'Min:'）}
-- 
@foreach（$number作为$number）
{{$number}
@endforeach

一切正常，元素按预期打开和关闭显示，但我的问题是

我担心，由于javascript依赖于介质唯一id为“3”，如果这一点发生变化（可能是由于意外删除和替换），表单将停止工作。 依赖数据库ID实现这种功能可以吗？有没有更可靠的方法

谢谢，

---

Dan

通过使用class

.media复选框

并循环其项目，可以使选择器更可靠。然后您可以提取并检查id

$( ".media-checkboxes" ).each(function( index ) {
    var id = $(this).attr("id"); // you can extract 'name' or 'value'
    //if you want, you can check this id and only 
    //listen to the event for a certain item.
    $('#' + id).on("change", function () {
    var x = document.getElementById("block");
    if (this.checked) {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  });
});

---

此代码倾向于激发您对此进行更多控制。

您希望在

#mediumId3

中只显示id 3还是所有id？什么决定了id跟踪其变化？