Knockoutjs list, Alternate of Checkbox and Radio

An alternate list of checkboxes and radio buttons

by Muhammad Raheel

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://imgh.us/checkbox.png"></script>
<ul class="srh_fltr" data-bind='with:MyChoice'>
	<label style="color: #142D69;display: table;font-size: 18px;">Answer I'll accept..</label>
	<!-- ko foreach:List -->
	<li style="margin-bottom:0px">
		<label data-bind="text:Label,css:LabelColor"></label>
		<div class="check_box">
			<a class="active" data-bind="css:Class,click:$parent.ToggleClick.bind($data)">
				<img src="http://imgh.us/spacer_4.gif" alt="" />
			</a>
		</div>
	</li>
	<!-- /ko -->
</ul>
<table>
	<tr>
		<td>IDs</td>
		<td><text data-bind='text:MyChoice().Ids'></text></td>
	</tr>
	<tr>
		<td>Values</td>
		<td><text data-bind='text:MyChoice().Descriptions'></text></td>
	</tr>
</table>

CSS

.srh_fltr {
    padding: 10px 10px 0;
}
p, h1, h2, h3, ul, ol, li {
    font-weight: normal;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.srh_fltr li:last-child {
    margin-bottom: 0;
}
.srh_fltr li {
    background: none repeat scroll 0 0 #F2F2F2;
    clear: both;
    content: "";
    margin-bottom: 10px;
    overflow: auto;
    padding: 12px 10px;
    position: relative;
}
.srh_fltr label {
    color: #B3B3B3;
    float: left;
    font-size: 18px;
    width: 100%;
}
div.check_box {
    height: 25px;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
}
div.check_box a.active {
    display: block;
}
div.check_box a {
    display: none;
}
a {
    color: #73B440;
    text-decoration: none;
}
div.check_box a.un_check img {
    background-position: 0 -25px;
}
div.check_box img {
    background: url("http://imgh.us/checkbox.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 25px;
    width: 40px;
}
.selected_filter {
    color: #73B440 !important;
}
.preformatted {
    margin-left: 10px;
}
pre {
    outline: 1px solid #CCCCCC;
    padding: 25px;
}
pre {
    background-color: #F8F8FF;
    border: 1px solid #C0C0C0;
    margin: 10px;
}

.string {
    color: #008000;
}
.number {
    color: #FF8C00;
}
.boolean {
    color: #0000FF;
}
.null {
    color: #FF00FF;
}
.key {
    color: #FF0000;
}

JavaScript

function format(string){
	return syntaxHighlight(JSON.stringify(JSON.parse(string), null, '\t'))
}

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

function in_array(needle, haystack, argStrict) {
    var key = '',
        strict = !! argStrict;

    if (strict) {
        for (key in haystack) {
            if (haystack[key] === needle) {
                return true;
            }
        }
    } else {
        for (key in haystack) {
            if (haystack[key] == needle) {
                return true;
            }
        }
    }

    return false;
}


function Filter(settings){
	var self	=	this
	/*	Single Confirmation	*/
	self.Active		=	ko.observable(false)
	self.Id			=	ko.computed(function(){
		if(settings.activeId){
			return settings.activeId
		}else{
			return ( self.Active() == true ) ? 1 : 0
		}	
	})
	self.Class		=	ko.computed(function(){
		settings.activeClass	=	(settings.activeClass) ? settings.activeClass : 'selected'
		settings.inActiveClass	=	(settings.inActiveClass) ? settings.inActiveClass : ''
		return ( self.Active() == true ) ? settings.activeClass : settings.inActiveClass
	})
	self.Label		=	ko.computed(function(){
		settings.activeText		=	(settings.activeText) ? settings.activeText : 'True'
		settings.inactiveText	=	(settings.inactiveText) ? settings.inactiveText :...