Skip to content

Instantly share code, notes, and snippets.

@dbrgn
Created December 5, 2012 09:02
Show Gist options
  • Save dbrgn/4214042 to your computer and use it in GitHub Desktop.
Save dbrgn/4214042 to your computer and use it in GitHub Desktop.
$(document).ready(function () {
$('.switch').each(function () {
var radio_yes = $(this).children('input[type=radio][value=1]')[0];
var toggle = $(this).children('label.switch-toggle');
if (radio_yes) {
// checkbox.addClass('hidden');
toggle.removeClass('hidden');
if (radio_yes.checked) {
toggle.addClass('on');
toggle.removeClass('off');
toggle.text(toggle.attr('data-on'));
} else {
toggle.addClass('off');
toggle.removeClass('on');
toggle.text(toggle.attr('data-off'));
};
}
});
$('.switch-toggle').click(function () {
var radio_yes = $(this).siblings('input[type=radio][value=1]')[0];
var radio_no = $(this).siblings('input[type=radio][value=0]')[0];
var toggle = $(this); // We need to inverse the logic here, because at the time of processing, // the checked status has not been enabled yet.
if (radio_yes.checked) {
toggle.addClass('off');
toggle.removeClass('on');
toggle.text(toggle.attr('data-off'));
radio_yes.checked = false;
radio_no.checked = true;
} else {
toggle.addClass('on');
toggle.removeClass('off');
toggle.text(toggle.attr('data-on'));
radio_yes.checked = true;
radio_no.checked = false;
};
});
});
label.switch-toggle {
background: url('/include/switch.png') repeat-y;
display: block !important;
height: 12px; padding-left: 26px;
cursor: pointer; display: none;
width: 40px;text-align: center;
line-height:10px;
}
label.switch-toggle.on {
background-position: 0px 12px;
}
label.switch-toggle.off {
background-position: 0px 0px;
}
.hidden {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment