red strike through

gray the text and put a red strike through when clicking check box.

by Oliver Kelso

HTML

<table>
<tr>
    <td>
        <input type="checkbox" name="mycheckbox">
        <span class="strike">
            <span class="listcheck">Yada Yada Yada</span>
        </span>
     </td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="mycheckbox">
        <span class="strike">
            <span class="listcheck">Yada Yada Yada</span>
        </span>
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="mycheckbox">
        <span class="strike">
            <span class="listcheck">Yada Yada Yada</span>
        </span>
    </td>
</tr>
</table>

CSS

.listcheck{
    font-size:20px;
    font-weight:bold;
    padding-left:5px;
    color:#000;
}
.listLight{
    color:#999;
}
.strikeon {
    color: red;
    text-decoration:line-through;
}

JavaScript

$(document).ready(function() {

    $( "input[type='checkbox']" ).bind('change', function () {
       if ($(this).is(':checked')) {
           $(this).next(".strike").addClass("strikeon"),
           $(this).next(".strike").children("span").addClass("listLight"); 
       }else{   
           $(this).next(".strike").removeClass("strikeon"),
           $(this).next(".strike").children("span").removeClass("listLight");           
       }
    });
    
});