SamMousa/multi-checkbox.html

## multi-checkbox.html
<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<template id="mc">


    <select multiple="multiple">
        <content></content>
    </select>
<style>
    label {
        display: block;
    }

    :host {
        display: inline-block;
    }
</style>
</template>
<body>

<script>
    setTimeout(function() {
        var CheckboxProto = Object.create(HTMLElement.prototype, {
            value: {
                get: function() {
                    var o = this.querySelector("option:checked");
                    return o ? o.value : "";
                },
                set: function(val) { console.log(val); }
            },
            selectedIndex: {
                get: function() {
                    return Array.prototype.indexOf.call(this.querySelectorAll("option"), this.querySelector("option:checked"));
                }
            },
            options: {
                get: function() {
                    return this.querySelectorAll("option");
                }
            }

        });

        CheckboxProto.attributeChangedCallback = function() {

            console.log('attributeChanged', arguments);
        }
        CheckboxProto.createdCallback = function() {
            this.shadowRoot = this.createShadowRoot();
            this.shadowRoot.appendChild(document.importNode(document.getElementById('mc').content, true));
            this.type = "select-multiple";
            this.tagName = "SELECT";
            var that = this;

            this.shadowRoot.addEventListener('click', function(e) {
                if (e.target.matches("input")) {
                    var t = that.querySelector('[value=' + e.target.value + ']');
                    t.selected = e.target.checked;
                    console.log(t);
                }
            });
            for (var i = 0; i < this.children.length; i++) {
                var option = this.children[i];
                if (option.tagName !== 'OPTION') {
                    throw "Invalid child tag: " + option.tagName;
                } else {
                    $('<label>').append(
                            $('<input/>')
                                    .attr({
                                        type: "checkbox",
                                        value: option.value,
                                        checked: option.selected
                                    }))
                            .append(option.textContent)
                            .appendTo(this.shadowRoot)
                            .on('click', function() {
                                this.querySelector
                            });


                }
            }
            console.log(this);

            console.log('created', arguments);
        }
        var MultiCheckbox = document.registerElement('multi-checkbox', {
            prototype: CheckboxProto
        });
    }, 1);

</script>


<select id="normal" name="normal" multiple="multiple">
    <option value="opt1">Opt 1 title</option>
    <option value="opt2">Opt 2 title</option>
    <option value="opt3">Opt 3 title</option>
</select>

<multi-checkbox>
    <option value="opt1">Opt 1 title</option>
    <option value="opt2">Opt 2 title</option>
    <option value="opt3">Opt 3 title</option>
</multi-checkbox>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<template id="mc">


	<select multiple="multiple">
	<content></content>
	</select>
	<style>
	label {
	display: block;
	}

	:host {
	display: inline-block;
	}
	</style>
	</template>
	<body>

	<script>
	setTimeout(function() {
	var CheckboxProto = Object.create(HTMLElement.prototype, {
	value: {
	get: function() {
	var o = this.querySelector("option:checked");
	return o ? o.value : "";
	},
	set: function(val) { console.log(val); }
	},
	selectedIndex: {
	get: function() {
	return Array.prototype.indexOf.call(this.querySelectorAll("option"), this.querySelector("option:checked"));
	}
	},
	options: {
	get: function() {
	return this.querySelectorAll("option");
	}
	}

	});

	CheckboxProto.attributeChangedCallback = function() {

	console.log('attributeChanged', arguments);
	}
	CheckboxProto.createdCallback = function() {
	this.shadowRoot = this.createShadowRoot();
	this.shadowRoot.appendChild(document.importNode(document.getElementById('mc').content, true));
	this.type = "select-multiple";
	this.tagName = "SELECT";
	var that = this;

	this.shadowRoot.addEventListener('click', function(e) {
	if (e.target.matches("input")) {
	var t = that.querySelector('[value=' + e.target.value + ']');
	t.selected = e.target.checked;
	console.log(t);
	}
	});
	for (var i = 0; i < this.children.length; i++) {
	var option = this.children[i];
	if (option.tagName !== 'OPTION') {
	throw "Invalid child tag: " + option.tagName;
	} else {
	$('<label>').append(
	$('<input/>')
	.attr({
	type: "checkbox",
	value: option.value,
	checked: option.selected
	}))
	.append(option.textContent)
	.appendTo(this.shadowRoot)
	.on('click', function() {
	this.querySelector
	});


	}
	}
	console.log(this);

	console.log('created', arguments);
	}
	var MultiCheckbox = document.registerElement('multi-checkbox', {
	prototype: CheckboxProto
	});
	}, 1);

	</script>


	<select id="normal" name="normal" multiple="multiple">
	<option value="opt1">Opt 1 title</option>
	<option value="opt2">Opt 2 title</option>
	<option value="opt3">Opt 3 title</option>
	</select>

	<multi-checkbox>
	<option value="opt1">Opt 1 title</option>
	<option value="opt2">Opt 2 title</option>
	<option value="opt3">Opt 3 title</option>
	</multi-checkbox>
	</body>
	</html>