Multi-Row quick Selection

quickly select checkboxes by rolling over a DIV instead of individually checking them

by Phil Glau

HTML

<form name="TeachCompany" id="TeachCompany" method="post" action="/a/media.php" enctype="application/x-www-form-urlencoded">
    <table cellspacing="0" class="t">
        <tr>
            <th width="150">Move to:</th>
            <th>Quick</th>
        </tr>
        <tr bgcolor="#CCCCFF">
            <td align="center">
                <select name="CMUCH-439b.mp3_MOV" id="120587">
                    <option value="media/review">Review_Abandoned_Files</option>
                    <option value="transcribers/library">LIBRARY</option>
                    <option value="media/oldMP3">Old_MP3s</option>
                    <option value="media/reserve">RESERVE</option>
                    <option value="media/holder">HOLDER</option>
                    <option value="media/RMholder">VIDEO</option>
                    <option value="media/TeachCompany">TeachCompany</option>
                    <option value="noMOV" SELECTED>Don't Move</option>
                </select>
            </td>
            <td>
                <div class='qs'></div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td align="center">
                <select name="JHSPLEM-10a.mp3_MOV" id="120373">
                    <option value="media/review">Review_Abandoned_Files</option>
                    <option value="transcribers/library">LIBRARY</option>
                    <option value="media/oldMP3">Old_MP3s</option>
                    <option value="media/reserve">RESERVE</option>
                    <option value="media/holder">HOLDER</option>
                    <option value="media/RMholder">VIDEO</option>
                    <option value="media/TeachCompany">TeachCompany</option>
                    <option value="noMOV" SELECTED>Don't Move</option>
                </select>
            </td>
            <td>
                <div class='qs'></div>
            </td>
        </tr>
        <tr bgcolor="#CCCCFF">
            <td align="center">
               ...

CSS

td {
    border: 1px #000 solid;
    text-align: center;
}
div.qs {
    width: 100%;
    height: 2em;
}

JavaScript

$(document).ready(function () {
    $('.qs').mouseover(function () {
        // when any DIV with the qs class is rolled over, we then derive
        // the correct ID for the master_selector
        var curFormID = $(this).closest('form').attr('id') + '_qs_master';
        // qs_master is the Select Menu that will provide the setting for all
        // the individual row Select Menus.
        var qs_master = $('#' + curFormID);
        
        // find the row pulldown Select menu closest to the .qs DIV that was just
        // rolled over. In this case, it's to the immediate left of the selector DIV
        var pulldown = $(this).parent().closest('tr').find("select");
        
        if (qs_master.val() != 'noMOV') {
            // the master selector is set to some valid setting other than "Don't Move"
            if (pulldown.val() == 'noMOV') {
                // the row selector gets set to the value of the master selector
                $(this).css("background", "yellow");
                pulldown.val(qs_master.val());
            } else {
                // the row selector was something other than default and is set to 
                // default instead. In this case "Don't move"
                $(this).css("background", "");
                pulldown.val('noMOV');
            }
        } else if (qs_master.val() == 'noMOV' && pulldown.val() != 'noMOV') {
            // master selector is set to "Don't Move",but row isn't,
            // reset the row to "Don't Move" as well.
            $(this).css("background", "");
            pulldown.val('noMOV');
        }
    });
});