Question

该脚本有效并向我显示了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>

Answer 1

属性id在文档中必须是唯一的。您可以将this对象传递给函数，通过该函数可以按类定位相关的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>

Answer 2

目前您的代码存在的问题是，您试图将所有内容绑定到相同的ID，ID应该是唯一的标识符，这意味着在任何给定页面上的代码中都不应重复这些标识符。

您将事件绑定到第一个框，然后将内容绑定到ID为content和check的第一个实例，随后的绑定将不被考虑。

要解决此问题，您必须按类别选择（不推荐），或者按ID选择但要动态生成ID，可以通过替换行来实现

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

与

<input type="checkbox" name="check" id="check-{{$ingrediente->id}}" value="" onchange="javascript:showContent('{{$ingrediente->id}}')" />

并再次输入<div class="dv" id="content" style="display:none;">

行

您可以将其更改为

<div class="dv" id="content-{{$ingrediente->id}}" style="display:none;">

，然后更改您的showContent方法以接受参数。

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

祝你好运：）

Answer 3

您正在为复选框使用重复的ID，并为所有行使用div内容。您应该为div的ID添加更多具体信息，并为showConent（）函数传递参数

<td>
   <label>
      <input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent({{$ingrediente->id}})" />
    </label>
</td>
<td>
   <div class="form-group row">
      <div class="col-sm-4">
         <div class="dv" id="content-{{$ingrediente->id}}" style="display:none;">
            <input class="dvs" id="ex1" type="number" />
         </div>
      </div>
   </div>
</td>

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

显示<div>与复选框jQuery

3 个答案: