checkbox highlight td table

by Akram kamal

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<body class="twoColLiqLt">
    <div id="container">
        <div id="sidebar1">
             <h3>Parameters:</h3>

            <form id="form1" name="form1" method="post" action="">
                <label>
                    <input type="checkbox" name="x" class="selector" />x</label>
                <label>
                    <input type="checkbox" name="y" class="selector" />y</label>
                <label>
                    <input type="checkbox" name="z" class="selector" />z</label>
                <label>
                    <input type="checkbox" name="q" class="selector" />q</label>
                <label>
                    <input type="checkbox" name="xy" class="selector" />xy</label>
                <br />
                <label>
                    <input type="checkbox" name="SelectAll" class="all" />Select All</label>
                <label>
                    <input type="checkbox" name="UnselectAll" class="all" />Unselect All</label>
            </form>
            <p>&nbsp;</p>
            <!-- end #sidebar1 -->
        </div>
        <div id="mainContent">
             <h3>Values:</h3>

            <table width="611" height="129" border="1">
                <tr>
                    <td>x</td>
                    <td>&nbsp;</td>
                    <td>z</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>z</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>y</td>
                    <td>q</td>
                    <td>q</td>
                    <td>&nbsp;</td>
                    <td>y</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>y</td>
                    <td>q</td>
                    <td>&nbsp;</td>
                    <td>z</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
            ...

CSS

body {
     font: 100% Verdana, Arial, Helvetica, sans-serif;
     background: #666666;
     margin: 0;
     padding: 0;
     text-align: center;
     color: #000000;
 }
 .twoColLiqLt #container {
     width: 80%;
     background: #FFFFFF;
     margin: 0 auto;
     border: 1px solid #000000;
     text-align: left;
 }
 .twoColLiqLt #sidebar1 {
     float: left;
     width: 24%;
     background: #EBEBEB;
     padding: 15px 0;
 }
 .twoColLiqLt #sidebar1 h3, .twoColLiqLt #sidebar1 p {
     margin-left: 10px;
     margin-right: 10px;
 }
 .twoColLiqLt #mainContent {
     margin: 0 20px 0 26%;
 }
 .fltrt {
     float: right;
     margin-left: 8px;
 }
 .fltlft {
     float: left;
     margin-right: 8px;
 }
 .clearfloat {
     clear:both;
     height:0;
     font-size: 1px;
     line-height: 0px;
 }
 .highlight {
     background:#f00;
 }
 </style>

JavaScript

$('#form1 .selector').on('click', check);
$('#form1 .all').on('click', all);

function all() {
    $('#form1 .selector').prop("checked", this.name === "SelectAll")
    $('#form1 .all').not(this).prop("checked", false)
    check()
}

function check() {
    var checked = $("#form1 .selector:checked").map(function () {
        return this.name
    }).get()
    $('#mainContent table td').removeClass("highlight").filter(function () {
        return $.inArray($(this).text(), checked) >= 0
    }).addClass("highlight")
}