Jquery - table - checkboxes

JavaScript
1

I may have one row or multiple rows that have checkboxes.

My selector is at the table level

  1. How can i check for all the checkboxes that are in the table, are checked and then apply the background color onload?

  2. How can i tie a click event to a check box that is inside a table row. I may have one or multiple tows?

Thanks

2

Below is my implementation, there are 2 ways this can be done:

  1. applying the css class to the check box
  2. applying the css class to the table

Script


<script type="text/javascript">
var TableRowHighlighter = {
    _tableSelector: "tableRowhighlightCB",
    _rowSelector: "rowhighlightCB",
    _tableRowHighlightClass: "highlighter",
    _applyHighlight: function($clicked){
        $clicked.closest("tr").addClass(TableRowHighlighter._tableRowHighlightClass);
    },
    _removeHighlight: function($clicked){
        $clicked.closest("tr").removeClass(TableRowHighlighter._tableRowHighlightClass);
    },
    CheckBoxRowSelect: function(e, $clicked){
        if ($clicked.attr("checked") == true) { 
            TableRowHighlighter._applyHighlight($clicked);
            TableRowHighlighter.RemoveOtherCheckBoxesHightLightSameNameNotChecked(e, $clicked);//when we make checkbox behave like a radio button
        } 
        else
            TableRowHighlighter._removeHighlight($clicked);
    },
    RemoveOtherCheckBoxesHightLightSameNameNotChecked: function(e, $clicked){
        var inputname = $clicked.attr("name");
        $('input[name='+inputname+']').each(function(){
            if($(this).attr("checked") != true)
                TableRowHighlighter._removeHighlight($(this));
        });
    }
    
}

$(document).ready(function() {
    //check box clicked with the specified css selector
    $("." + TableRowHighlighter._rowSelector).live('click', function (e) {
        TableRowHighlighter.CheckBoxRowSelect(e, $(this));
    });
    //check box keyup with the specified css selector
    $("." + TableRowHighlighter._rowSelector).live('keyup', function (e) {
        TableRowHighlighter.CheckBoxRowSelect(e, $(this));
    });
    //check box clicked with the specified table css selector
    $("." + TableRowHighlighter._tableSelector + " tr td input[type='checkbox']").live("click", function (e) {
        TableRowHighlighter.CheckBoxRowSelect(e, $(this));
    });
    //check box keyup with the specified table css selector
    $("." + TableRowHighlighter._tableSelector + " tr td input[type='checkbox']").live("keyup", function (e) {
        TableRowHighlighter.CheckBoxRowSelect(e, $(this));
    });
    // on page load highlight rows for selected checkboxes that have a specified css selector        
    $("." + TableRowHighlighter._rowSelector + ":checked").closest("tr").addClass(TableRowHighlighter._tableRowHighlightClass);
    //on page load, highlight rows for a table that has a specified selector
    $("." + TableRowHighlighter._tableSelector + " tr td").filter(':has(:checkbox:checked)').closest("tr").addClass(TableRowHighlighter._tableRowHighlightClass);

});
</script>

CSS


<style type="text/css">
    .highlighter{ background-color: aqua; }
</style>

HTML


<table class="tableRowhighlightCB">
        <tr>
            <td witdh="50px"><input name="one" type="checkbox" rel="1" value="G" /></td>
            <td witdh="200px">One</td>
        </tr>
        <tr>
            <td witdh="50px"><input name="one" type="checkbox" rel="2" value="G" /></td>
            <td witdh="200px">Two</td>
        </tr>
        <tr>
            <td witdh="50px"><input name="one" type="checkbox" rel="3" value="G" checked="checked" /></td>
            <td witdh="200px">Three</td>
        </tr>
        <tr>
            <td witdh="50px"><input name="two" type="checkbox" rel="4" value="G" /></td>
            <td witdh="200px">Four</td>
        </tr>
        <tr>
            <td witdh="50px"><input name="two" type="checkbox" rel="5" value="G" checked="checked" /></td>
            <td witdh="200px">Five</td>
        </tr>
        <tr>
            <td witdh="50px"><input name="two" type="checkbox" rel="6" value="G" /></td>
            <td witdh="200px">Six</td>
        </tr>
    </table>
3

Need one help, how can i change onloads to work with “live” so that i can handle ajax content?

4

Cleaned up the code, i still need help with applying onload events via “live” so that these get attached to content pulled via ajax.


var TableRowHighlighter = {
    _tableSelector: "tableRowhighlightCB",
    _checkBoxSelector: "rowhighlightCB",
    _tableRowHighlightClass: "highlighter",
    RemoveHighlightForAllNotChecked: function ($item) {
        $item.filter(':not(:checked)').closest("tr").removeClass(TableRowHighlighter._tableRowHighlightClass);
    },
    CheckBoxRowSelect: function (e, $clicked) {
        if ($clicked.attr("checked") == true) {
            $clicked.closest("tr").addClass(TableRowHighlighter._tableRowHighlightClass);
            TableRowHighlighter.RemoveHighlightForAllNotChecked($('input[name=' + $clicked.attr("name") + ']')); //when we make checkbox behave like a radio button
        }
        else
            $clicked.closest("tr").removeClass(TableRowHighlighter._tableRowHighlightClass);
    }
}

$(document).ready(function () {
    //check box clicked with the specified css selector
    $("." + TableRowHighlighter._checkBoxSelector).live('click', function (e) {
        TableRowHighlighter.CheckBoxRowSelect(e, $(this));
    });
    //check box keyup with the specified css selector
    $("." + TableRowHighlighter._checkBoxSelector).live('keyup', function (e) {
        TableRowHighlighter.CheckBoxRowSelect(e, $(this));
    });
    //check box clicked with the specified table css selector
    $("." + TableRowHighlighter._tableSelector + " tr td input[type='checkbox']").live("click", function (e) {
        TableRowHighlighter.CheckBoxRowSelect(e, $(this));
    });
    //check box keyup with the specified table css selector
    $("." + TableRowHighlighter._tableSelector + " tr td input[type='checkbox']").live("keyup", function (e) {
        TableRowHighlighter.CheckBoxRowSelect(e, $(this));
    });
    // on page load highlight rows for selected checkboxes that have a specified css selector        
    $("." + TableRowHighlighter._checkBoxSelector + ":checked").closest("tr").addClass(TableRowHighlighter._tableRowHighlightClass);
    //on page load, highlight rows for a table that has a specified selector
    $("." + TableRowHighlighter._tableSelector + " tr td").filter(':has(:checkbox:checked)').closest("tr").addClass(TableRowHighlighter._tableRowHighlightClass);

});