Counter of selected controls
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
<title>vbeiSearchPageForTestsAndPackages</title>
<!--Include firebug lite to be able to use console.debug-->
<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js">
{
overrideConsole: false,
startInNewWindow: false,
startOpened: false,
enableTrace: true,
disableXHRListener: true
}
</script>-->
<script>
function toogleAllowFastSearch() {
console.debug("toggleFastSearch");
if (document.getElementById("RadioButtonListSeachOption_2").checked) {
//document.getElementById("chkFastSearch").checked = false;
$("#chkFastSearch").attr("checked","").change(); //notify the change !
}
else {
//document.getElementById("chkExtendTheSearchToOtherFields").checked = false;
$("#chkExtendTheSearchToOtherFields").attr("checked","").change(); //notify the change !
//document.getElementById("chkFastSearch").checked = true;
$("#chkFastSearch").attr("checked","checked").change(); //notify the change !
}
}
</script>
</head>
<body>
<form name="Form_SearchTestAndPackage" method="post" action="search2.aspx?operatorCode=bjch&mode=offer&selection=test" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'StartSearch')" id="Form_SearchTestAndPackage">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
</div>
<div>
<input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
</div>
<!-- PAGE CONTENT START -->
<!--LEFT BOX START - Box for basic search options-->
<div id="boxLeft">
<div id="Panel_SearchBox">
...
CSS
.filter-counter{font-weight:bold;background-color:Red;}
JavaScript
if(!window.console){
//in case no console exists, provide a useless implementation but warn user
alert("console.debug not supported here. use a decent browser and/or Firebug :)");
window.console = {debug:function(){
//do nothing
return;
}
};
}
;(function ($) {
//make a jQuery plugin
$.fn.filterCount = function (options) {
//merge passed options with defaults
var opts = $.extend({}, $.fn.filterCount.defaults, options);
return this.each(function () {
var $collapsibleTitleLabel = $(this);
//append the span that will contain the counter (hidden at first)
$('<span class="' + opts.counterCssClass+ '">counter</span>').hide().insertAfter($collapsibleTitleLabel);
//handle change in all contained inputs, in case of change
var $collapsibleBody = $collapsibleTitleLabel.parent("div").next("div");
$collapsibleBody._refreshCounter = function() {
var $div= $(this);
console.debug("refresh");
//compute the new value for the counter
var cnt = $div.find(":checkbox").filter(":checked").filter(":enabled").length;
$div.find("select").each(function(){
var $select = $(this);
console.debug($select);
if (!$select[0].multiple) {
cnt += (!$select[0].disabled && $select[0].selectedIndex > 0) ? 1 : 0;
}
else {
if (!$select.disabled) {
cnt += $select.find("option:selected").length;
}
}
});
$(this).prev("div").find("span." + opts.counterCssClass).html("(" + cnt...