selectボックスをcheckboxに変換するuser.js

select2checkbox.user.js

// ==UserScript==
// @name           select2checkbox
// @match          http://*/*
// ==/UserScript==
(function(){

var CHECKBOX_TEMPLATE = '<label><input type="checkbox" name="%name" value="%value" /><span style="margin-left:5px;">%text</span></label></br>';
var div = document.createElement('div');
var select = document.querySelector('#components');
var name = select.name;
var options = Array.prototype.slice.apply(select.options);

// convert select to checkbox
var injectHTML = "";
for(var i=0;i<options.length;i++){
    var html = CHECKBOX_TEMPLATE;
    html = html.replace('%name', name);
    html = html.replace('%value', options[i].value);
    html = html.replace('%text', options[i].innerHTML);
    injectHTML += html;
}
div.innerHTML = injectHTML;

// create revert link
var revertLink = document.createElement('a');
revertLink.href = "javascript:void(null)";
revertLink.innerHTML = "元に戻す";
revertLink.addEventListener('click', function(){
    div.style.display = "none";
    revertLink.style.display = "none";
    select.style.display = "";
});

// select box hide
select.style.display = "none";

// insert
var injectElement = select.parentNode.insertBefore(div, select);
select.parentNode.insertBefore(revertLink, select);

})();