JavaScript-与复选框jQuery一起显示

该脚本起作用并向我显示div,但仅显示一条记录,而我还有10条记录,其中没有任何选择检查的记录.

看：

它仅在第一次检查时有效,而其余的则不可能,有解决方案吗？

剧本

<script type="text/javascript">
    function showContent() {
        element = document.getElementById("content");
        check = document.getElementById("check");
        if (check.checked) {
            element.style.display='block';
        }
        else {
            element.style.display='none';
        }
    }
</script>

风景

<table class="table table-striped">
  <thead>
      <tr>
        <td>ID</td>
        <td>Nombre del Ingrediente</td>
        <td>Proveedor</td>
        <td>Agregar</td>
        <td>Cantidad</td>
      </tr>
  </thead>
  <tbody>
      @foreach($ingredientes as $ingrediente)
      <tr>
          <td>{{$ingrediente->id}}</td>
          <td>{{$ingrediente->nombre}}</td>
          <td>{{$ingrediente->proveedor}}</td>
          <td>

              <label>
            <input type="checkBox" name="check" id="check" value="" onchange="javascript:showContent()" />
          </label>

          </td>
          <td>
            <div class="form-group row">
             <div class="col-sm-4">
               <div class="dv" id="content" style="display:none;">
            <input class="dvs" id="ex1" type="number" />
            </div>
          </div>
          </div>
          </td>
      </tr>
      @endforeach
  </tbody>
</table>

解决方法:

属性id在文档中必须是唯一的.您可以将此对象传递给函数,通过该函数可以按类定位相关的div元素.

function showContent(el) {
  var element = el.parentNode.parentNode.nextElementSibling.querySelector('.dv');
  if (el.checked) {
    element.style.display='block';
  }
  else {
    element.style.display='none';
  }
}

<table class="table table-striped">
  <thead>
    <tr>
      <td>ID</td>
      <td>Nombre del Ingrediente</td>
      <td>Proveedor</td>
      <td>Agregar</td>
      <td>Cantidad</td>
    </tr>
  </thead>
  <tbody>

  <tr>
    <td>111</td>
    <td>mnl</td>
    <td>Test.....</td>
    <td>

    <label>
      <input type="checkBox" name="check" id="check" value="" onchange="javascript:showContent(this)" />
    </label>

    </td>
    <td>
      <div class="form-group row">
        <div class="col-sm-4">
          <div class="dv" style="display:none;">
            <input class="dvs" type="number" />
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>222</td>
    <td>xyz</td>
    <td>Test..</td>
    <td>

    <label>
      <input type="checkBox" name="check" id="check" value="" onchange="javascript:showContent(this)" />
    </label>

    </td>
    <td>
      <div class="form-group row">
        <div class="col-sm-4">
          <div class="dv" style="display:none;">
            <input class="dvs" type="number" />
          </div>
        </div>
      </div>
     </td>
    </tr>
  </tbody>
</table>