show <div> with checkbox jquery

Question

the script works and shows me the div, but only for one record, and I have 10 more records where it does nothing to select the check.

look:

It only works with the first check, but the rest is not possible, any solution?

the script

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

the view

<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

The attribute id must be unique in a document. You can pass this object to the function by which you can target the relevant div element by class.

 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

the problem with your code at the moment is that you are trying to bind everything to the same ID, IDs should be unique identifiers, meaning there should be no duplication of them in your code on any given page.

You are binding the event to the first box and then subsequently, the content to first instance of the id content and check , subsequent bindings are not taken into account.

To remedy this, you must either select by class (not recommended) or instead, select by ID but dynamically generate the ID, you could do this by replacing the line

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

with

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

and again for the line <div class="dv" id="content" style="display:none;">

you can change this to

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

and then changing your showContent method to accept a parameter.

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

Good luck :)

Answer 3

You are using duplicate id for checkbox and div content for all row. You should add more specific info for div's id and pass argument for showConent() function

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