vendredi 1 mai 2015

Counter doesnt not show 0 when no checkbox checked

I have a set of checkboxes for category. WHen a category selected, its related list will be fetched from database by an ajax call to appear within a table below. In that table, beside each list name, there's a checkbox for the user to check as many list as they want.

Now I used counter to count how many checboxes are clicked for the second checkbox set or I call it boxA.

It works but problem is, whenever I choose a category, the list appear within boxA. The second time I select a category, the list previously checked list dispappears.(Note: just the checked checkboxes becomes unchecked, the entire list still there). So by right, when no checkboxes are checked and when the boxA is empty ,the counter must show 0. How to get this work please.Below is my script.

<script>
function myFunction() {
    var x = document.getElementById("boxA").value;
    document.getElementById("count").innerHTML = "You selected: " + x;
}
</script>

I tried in this way to no avail:

<script>
function myFunction() {
    var x = document.getElementById("boxA").value;
    if($(this).is(":checked")) {
    document.getElementById("count").innerHTML = "You selected: " + x;
    }
    else {
        $("td."+x).remove();//controls removing from boxA

     }
}
</script>

The html

    <table class="show small-8 medium-8 large-8 columns small-centered medium-centered large-centered" id="boxA">
<!--this is the part fetcehd from db-->
         <tr><th class="<?php echo $q ;?> title"><?php echo $levels;?>
        <table id="inner">
          <tr>
           <td style="width:50%" class="subject"><?php echo $subjects;?></td>
           <td style="width:5%;"><input type="checkbox" class="sub" name="sub['.$subjects_id.']" id="sub" value="" onchange="myFunction()"><br></td>
           <td style="width:30%;"><span class="test"><input type="textbox" name="rate2['.$subjects_id.']" class="rate2" value=""  placeholder="<?php echo $placeholder?>" id="rate2"></span></td>
         </tr>
    </table>';
       <!--this is the part fetcehd from db ends-->
       </th></tr>
     </table>




Aucun commentaire:

Enregistrer un commentaire