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 commented May 6, 2014

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.