[Answered ]-How to show table row based on checkbox selection in javascript

by

1👍

I have changed the script to check the value of input box. try this

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

Please format the code before posting here so that we can easily identify the issue

👤Sojin Antony

Leave a comment