gokhansongul/checkboxObserver.html

## checkboxObserver.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Checkbox Observer</title>

    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.js"></script>

    <script type="text/javascript" src="test.js"></script>


</head>
<body>
    <input type="checkbox" id="checkbox" />
    <input type="button" id="getCurrentStatus" value="Get current checkbox status" />
    <input type="button" id="runFromCommandLine" value="Run 'checkboxObserver.toggle()' from command line" />
</body>
</html>

## test.js
var CheckboxObserver = function(item) {
    var customTriggerParam = "inner"
    //var itemChecked = item.is(":checked");
    var observerData = {};
    var eventType;
    var eventCallback;
    /**
    * Toggle checkbox
    */
    this.getObserverData = function() {
        return observerData;
    };

    this.setObserverData = function(data) {
        observerData = data;
    }

    this.handler = function(e, triggerParam) {
        e = e || {};
        console.log(triggerParam);
        //if its called directyl from object
        if (!e.type && triggerParam != customTriggerParam) {
            //TODO: 'click' should be read from event object
            item.trigger(eventType, [customTriggerParam]);
        }
        //if its triggered
        else if (e.type) {
            eventCallback();
        }
    };

    this.bind = function(eType, callback) {
        eventType = eType;
        eventCallback = callback;
        item.bind(eventType, this.handler);
    }
};

var checkboxObserver;

$(function() {
    var $checkboxItem = $("#checkbox");
    checkboxObserver = new CheckboxObserver($checkboxItem);
    checkboxObserver.setObserverData({ isChecked: false });
    checkboxObserver.bind('click', function() {
        var isChecked = checkboxObserver.getObserverData().isChecked;
        checkboxObserver.setObserverData({ isChecked: !isChecked });
    });

    $("#getCurrentStatus").click(function() {
        alert(checkboxObserver.getObserverData().isChecked);
    });

    $("#runFromCommandLine").click(function() {
        checkboxObserver.toggle();
    });
});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Checkbox Observer</title>

	<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.js"></script>

	<script type="text/javascript" src="test.js"></script>


	</head>
	<body>
	<input type="checkbox" id="checkbox" />
	<input type="button" id="getCurrentStatus" value="Get current checkbox status" />
	<input type="button" id="runFromCommandLine" value="Run 'checkboxObserver.toggle()' from command line" />
	</body>
	</html>
	var CheckboxObserver = function(item) {
	var customTriggerParam = "inner"
	//var itemChecked = item.is(":checked");
	var observerData = {};
	var eventType;
	var eventCallback;
	/**
	* Toggle checkbox
	*/
	this.getObserverData = function() {
	return observerData;
	};

	this.setObserverData = function(data) {
	observerData = data;
	}

	this.handler = function(e, triggerParam) {
	e = e \|\| {};
	console.log(triggerParam);
	//if its called directyl from object
	if (!e.type && triggerParam != customTriggerParam) {
	//TODO: 'click' should be read from event object
	item.trigger(eventType, [customTriggerParam]);
	}
	//if its triggered
	else if (e.type) {
	eventCallback();
	}
	};

	this.bind = function(eType, callback) {
	eventType = eType;
	eventCallback = callback;
	item.bind(eventType, this.handler);
	}
	};

	var checkboxObserver;

	$(function() {
	var $checkboxItem = $("#checkbox");
	checkboxObserver = new CheckboxObserver($checkboxItem);
	checkboxObserver.setObserverData({ isChecked: false });
	checkboxObserver.bind('click', function() {
	var isChecked = checkboxObserver.getObserverData().isChecked;
	checkboxObserver.setObserverData({ isChecked: !isChecked });
	});

	$("#getCurrentStatus").click(function() {
	alert(checkboxObserver.getObserverData().isChecked);
	});

	$("#runFromCommandLine").click(function() {
	checkboxObserver.toggle();
	});
	});