Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.02.2017, 13:20
Интересующийся
Отправить личное сообщение для AlexOk Посмотреть профиль Найти все сообщения от AlexOk
 
Регистрация: 02.11.2016
Сообщений: 20

Стилизованные checkbox, как вытащить значение
Доброго дня!
Воспользовался готовым кодом для работы checkbox на странице, в силу своей неопытности в js, не получается вытащить по нажатию кнопки текущее значение checkbox'а.
Как вытащить текущее значение checkbox'а в моем случае?
Спасибо и с наступающими

html
<div id="page">
<li><label for="ch_effects">Пролонгация: </label><input type="checkbox"  id="ch_effects" name="ch_effects" data-on="Да" data-off="Нет" /></li>
</div>


javascript
(function($){
	$.fn.tzCheckbox = function(options){
		// Default On / Off labels:
		
		options = $.extend({
			labels : ['ON','OFF']
		},options);
		
		return this.each(function(){
			var originalCheckBox = $(this),
				labels = [];

			// Checking for the data-on / data-off HTML5 data attributes:
			if(originalCheckBox.data('on')){
				labels[0] = originalCheckBox.data('on');
				labels[1] = originalCheckBox.data('off');
			}
			else labels = options.labels;

			// Creating the new checkbox markup:
			var checkBox = $('<span>',{
				className	: 'tzCheckBox '+(this.checked?'checked':''),
				html:	'<span class="tzCBContent">'+labels[this.checked?0:1]+
						'</span><span class="tzCBPart"></span>'
			});

			// Inserting the new checkbox, and hiding the original:
			checkBox.insertAfter(originalCheckBox.hide());

			checkBox.click(function(){
				checkBox.toggleClass('checked');
				var isChecked = checkBox.hasClass('checked');
				
				// Synchronizing the original checkbox:
				originalCheckBox.attr('checked',isChecked);
				checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
			});
			
			// Listening for changes on the original and affecting the new one:
			originalCheckBox.bind('change',function(){

				checkBox.click();
			});
		});
	};
})(jQuery);


css
Код:
.tzCheckBox{
	background:url('/images/background.png') no-repeat right bottom;
	display:inline-block;
	min-width:60px;
	height:33px;
	white-space:nowrap;
	position:relative;
	cursor:pointer;
	margin-left:14px;
}

.tzCheckBox.checked{
	background-position:top left;
	margin:0 14px 0 0;
}

.tzCheckBox .tzCBContent{
	color: white;
	line-height: 31px;
	padding-right: 38px;
	text-align: right;
}

.tzCheckBox.checked .tzCBContent{
	text-align:left;
	padding:0 0 0 38px;
}

.tzCBPart{
	background:url('/images/background.png') no-repeat left bottom;
	width:14px;
	position:absolute;
	top:0;
	left:-14px;
	height:33px;
	overflow: hidden;
}

.tzCheckBox.checked .tzCBPart{
	background-position:top right;
	left:auto;
	right:-14px;
}
Ответить с цитированием
  #2 (permalink)  
Старый 22.02.2017, 13:32
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от AlexOk
не получается вытащить по нажатию кнопки текущее значение checkbox'а.
<div id="page">
	<li>
		<label for="ch_effects">Пролонгация: </label>
		<input type="checkbox"  id="ch_effects" name="ch_effects" data-on="Да" data-off="Нет" />
	</li>
	<button onclick='test();'>Test</button>
</div>
<script type='text/javascript'>
function test(){
	alert(document.getElementById('ch_effects').checked);
};
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 22.02.2017, 14:59
Интересующийся
Отправить личное сообщение для AlexOk Посмотреть профиль Найти все сообщения от AlexOk
 
Регистрация: 02.11.2016
Сообщений: 20

ksa,
спасибо большое, это работает
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выводить значение раньше переменных Гробовщик Общие вопросы Javascript 11 10.09.2013 08:42
как получить значение ид-а, из текушего хтмл тега dadli Общие вопросы Javascript 2 28.01.2012 15:16
Как сделать кроссбраузерный checkbox irkprin jQuery 7 29.06.2011 11:32
Как в IE динамически установить значение события onClick? Гость Элементы интерфейса 6 16.01.2011 23:46
Переменная от переменной или как к имени переменной конкатенировать значение другой Aderba jQuery 5 12.11.2008 15:25