Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Polyfill to implement the toggle button by hidden radio input
/**
* Polyfill to implement the toggle button by hidden radio input
* Add "active" class to the buttonized element, for ":checked + el" expression
* @param {Object} options
*/
$.support.toggleButtons = "opacity" in document.createElement("div").style;
$.fn.toggleButtons = function(options){
var my = {};
if($.support.toggleButtons){
return this;
}
my.options = $.extend({
button: ".button"
}, options);
my.key = "toggleButtonInit";
my.names = [];
my.onClick = function(e){
this.prop("checked", true);
this.trigger("change");
my.update(this.attr("name"));
};
my.update = function(name){
$("input[name=" + name + "]").each(function(){
var input, button;
input = $(this);
button = input.siblings(my.options.button);
button.toggleClass("active", input.prop("checked"));
});
};
this.each(function(){
var input, name;
input = $(this);
if(input.data(my.key)){
return;
}
input.closest("label").on("click", $.proxy(my.onClick, input));
input.data(my.key, true);
name = input.attr("name");
if($.inArray(name, my.names) < 0){
my.names.push(name);
}
});
my.names.forEach(function(name){
my.update(name);
});
return this;
};
@mach3

This comment has been minimized.

Copy link
Owner Author

@mach3 mach3 commented May 6, 2014

ES5のメソッドをはずしてjQueryの機能を使うようにした。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment