vendredi 24 avril 2015

How to remove entire row in a table when checkbox unchecked?

I have multiple checkboxes on top for categories. When user 'check/select' the category, corresponding list from database will be shown in the table below.

The structure of the table as below:

<table id="boxA">
  <tr>
    <th>Category</th>
        <table>
         <tr>
           <td>List 1</td>
         </tr>
         <tr>
           <td>List 2</td>
         </tr>
        <tr>
           <td>List 3</td>
         </tr>
        </table>
  </tr>
</table>

My script as following,

<script>
       $("#slider1").change(function() {
       var value = $(this).val();
       sendtobox(value, $("input[type=checkbox]").val());
      });

    $("input[type=checkbox]").change(function() {  
     var selectedval = $(this).val();
     if($(this).is(":checked")) {
        var selectedtext = $(this).next().text();
        sendtobox(selectedval, $("#slider1").val());
     }
      else {
        **$("th."+selectedval).remove();**//controls removing from boxA

     }
    });
</script>

EDIT : checkbox Markup

<ul class="box small-block-grid-2 medium-block-grid-3 large-block-grid-2">
                  <li><input type="checkbox" name="level[Primary]" id="level" class="level" value="1"><label>Primary</label></li>
                  <li><input type="checkbox" name="level[Upper Secondary]" id="level" class="level" value="2"><label>Upper Secondary</label></li>
                  <li><input type="checkbox" name="level[University]" id="level" class="level" value="3"><label>University</label></li>
                  <li><input type="checkbox" name="level[Lower Secondary]" id="level" class="level" value="4"><label>Lower Secondary</label></li>
                  <li><input type="checkbox" name="level[Pre University]" id="level" class="level" value="5"><label>Pre University</label></li>
                  <li><input type="checkbox" name="level[Other]" id="level" class="level" value="6"><label>Other</label></li>                 
              </ul>

This( $("th."+selectedval).remove(); )is where it controls which element to remove. Currently it just removes the <th> for category,the list still showing. How to remove the entire row for the unchecked category please?

Thanks.




Aucun commentaire:

Enregistrer un commentaire