JSFiddle - React, Tailwind, and code Playground

by Sri Vaishnavi

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <h2>Multiple Checkbox Select/Deselect - DEMO</h2>
<table border="1">
<tbody><tr>
    <th><input type="checkbox" id="selectall"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
    <td>Droid X</td>
    <td>4.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
    <td>HTC Desire</td>
    <td>3/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
    <td>Apple iPhone 4</td>
    <td>5/5</td>
</tr>
</tbody></table>
<script language="javascript">$(function(){$("#selectall").click(function(){$('.case').attr('checked',this.checked);});$(".case").click(function(){if($(".case").length==$(".case:checked").length){$("#selectall").attr("checked","checked");}else{$("#selectall").removeAttr("checked");}});});</script>

JavaScript

$("#selectall").click(function({
                                   alert(this.id);
           $('.case').attr('checked',this.checked);
    });
$(".case").click(function(){
    if($(".case").length == $(".case:checked").length){
        $("#selectall").attr("checked","checked");
    }
    else{
        $("#selectall").removeAttr("checked");
    }
  });