Estoy tratando de mostrar la fila de la tabla según la selección del usuario en la casilla de verificación. Me sale un error en la consola. Como soy un novato en JavaScript y estoy reutilizando este fragmento de Mostrar/Ocultar filas de tabla basado en la casilla de verificación . Cualquier ayuda es realmente apreciada.
¿Cómo podría compararlo? Aunque necesito hacer coincidir el valor de la base de datos que no especifico explícitamente, como el nombre del país, todo proviene de la base de datos.
error:
(index):344 Uncaught ReferenceError: show Hide is not defined at HTMLDivElement.onclick ((index):344)html:
<div>Country</div> <div class="row" name="country_checkbox" id="id_row" > <ul id="id_country"> <li><label for="id_country_0"><input type="checkbox" name="country" value="NORTHAMERICA" placeholder="Select Country" id="id_country_0"> NORTHAMERICA</label> </li> <li><label for="id_country_3"><input type="checkbox" name="country" value="AMERICA" placeholder="Select Country" id="id_country_3"> AMERICA</label> </li> </ul> </div> <table class="datatable" id='table_id'> <thead> <thead> <tr> <th>Region</th> <th> Area </th> <th> Country </th> </tr> </thead> <tbody> <tr id="trow"> {% for i in database%} --- database retrieval <td>i.Region</td> <td>i.Area </td> <td>i.Country</td> </tr> </tbody> <script> $(document).ready(function () { $('#id_row').on('change', function(){ if ($(this).prop('checked')) { $('#trow').show(); } else { $('#trow').hide(); } }); }); </script>Cambié el script para verificar el valor del cuadro de entrada. prueba esto
$(document).ready(function () { $('#trow_1').hide(); $('#trow_2').hide(); //intially hide the rows $('#id_country_0').on('change', function(e){ if ( e.target.checked) { $('#trow_1').show(); } else { $('#trow_1').hide(); } }); $('#id_country_3').on('change', function(e){ if ( e.target.checked) { $('#trow_2').show(); } else { $('#trow_2').hide(); } }); }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>Country</div> <div class="row" name="country_checkbox" id="id_row" > <ul id="id_country"> <li> <label for="id_country_0"><input type="checkbox" name="country" value="NORTHAMERICA" placeholder="Select Country" id="id_country_0">NORTHAMERICA</label> </li> <li><label for="id_country_3"><input type="checkbox" name="country" value="LATAM" placeholder="Select Country" id="id_country_3"> LATAM</label> </li> </ul> </div> <table class="datatable" id='table_id'> <thead> <thead> <tr> <th>Region</th> <th> Area </th> <th> Country </th> </tr> </thead> <tbody> <tr id="trow_1"> <td>Asia </td> <td>India</td> <td>India</td> </tr> <tr id="trow_2"> <td>Asia2 </td> <td>India2</td> <td>India2</td> </tr> </tbody> </table>Formatee el código antes de publicarlo aquí para que podamos identificar fácilmente el problema.