I may have one row or multiple rows that have checkboxes.
My selector is at the table level
-
How can i check for all the checkboxes that are in the table, are checked and then apply the background color onload?
-
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
Below is my implementation, there are 2 ways this can be done:
- applying the css class to the check box
- 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>
Need one help, how can i change onloads to work with “live” so that i can handle ajax content?
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);
});