jQuery показать / скрыть пароль в поле ввода

В последнем проекте мне потребовалось реализовать переключатель, при клике на который будет показываться или скрываться пароль в соответствующем поле ввода пароля. Для решения, я накидал простой и небольшой код на jQuery, которым я хочу поделиться с вами в этом посте…

JavaScript

Для начала, подключаем jQuery и в отдельном файле пишем следующий код, который потом вы должны будете подключить на своей странице:

(function($) {
	$.toggleShowPassword = function(options) {
		var settings = $.extend({
			field:   '#password',
			control: '#toggle_show_password',
		}, options);
		
		var control = $(settings.control);
		var field   = $(settings.field)
		
		control.bind('click', function () {
			if (control.is(':checked')) {
				field.attr('type', 'text');
			} else {
				field.attr('type', 'password');
			}
		})
	};
}(jQuery));

Теперь для работы этого куска кода вам необходимо будет вызывать следующую конструкцию:

$.toggleShowPassword({
	field:   '.bbq_license', // класс поля с паролем
	control: '.bbq_license_toggle' // класс переключателя
});

HTML

Напоследок остается добавить соответствующую HTML разметку и можно спокойно пользоваться:

<input class="bbq_license" name="bbq_license_key" type="hidden" value="Пароль"> 
<input class="bbq_license_toggle" type="checkbox"> <span>Показать пароль</span>