Check on Rollover

Toggle a checkbox by simply rolling over it.

by Phil Glau

HTML

<table width="100%" border=0 cellspacing=0 cellpadding=3 align=center>
    <tr>
        <td width=1 valign=top></td>
        <td valign=top>
            <div align=center>
                <form id="report_form1" method="post" action="/a/proofing.php" enctype="application/x-www-form-urlencoded">
                    <table cellspacing="0" class="t" id="table1">
                        <thead>
                            <tr>
                                <td colspan="3" class="menu1">Select Proofed Documents to Send</td>
                            </tr>
                            <tr bgcolor="#DDDDDD">
                                <th width="95"><b>Document Name</b>
                                </th>
                                <th width="40">
                                    <div align="center">Rating</div>
                                </th>
                                <th width="60">
                                    <div align="center"><b>Send Proof</b>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tr bgcolor="#CCCCFF" class="docrow">
                            <td width='95'><a href="http://www.ridiculousprods.com/transcribers/proofed/7f222e4ba33273b43a3739ee36d3027c/HERSHMR-03b_of_c_profd.doc">HERSHMR-03b</a>
                            </td>
                            <td width="40" align="center">4</td>
                            <td width='60' class='qs'>
                                <div align="center">
                                    <input type="checkbox" name="send_prf_4584" value="Send" />
                                </div>
                            </td>
                        </tr>
                        <tr bgcolor="#FFFFFF" class="docrow">
                            <td width='95'><a...

JavaScript

$(document).ready(function () {
    var delay = 25; // ms of delay
    var timer;
    $(".qs").hover(function (e) {
         if (e.target.type !== 'checkbox') {
            cb = $(':checkbox', this);
            timer = setTimeout(function () {
                if (cb.is(':checked')) {
                    cb.prop('checked', false);
                } else {
                    cb.prop('checked', true);
                }
            } , delay);
        }
    }, function () {
        // if you leave the hover in less than delay time,
        // it resets the timer back to zero and doesn't change
        // the checkbox state.
        clearTimeout(timer);
    });
});