Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как повесить class на radio button без добавления для него событий типа onchange (https://javascript.ru/forum/jquery/46064-kak-povesit-class-na-radio-button-bez-dobavleniya-dlya-nego-sobytijj-tipa-onchange.html)

cha0s 26.03.2014 15:07
Как повесить class на radio button без добавления для него событий типа onchange
 
<div class="results">
<div id="results">
<div position_title="1" id="option-242" class="option radio">

<div class="fields" style="margin-top:1px;">
    <input style="display:none;" type="radio" name="option[242]" value="92" id="option-value-92">
    <label class="spanradio" for="option-value-92">5 x 7</label>
    <input style="display:none;" type="radio" name="option[242]" value="93" id="option-value-93">
    <label class="spanradio" for="option-value-93">6 x 6</label>
</div>
</div>
</div>
</div>


Как при помощи JS при клике на label(radio кнопка все равно выделяется когда жмешь на label), добавился класс на этот label, без ввода всяких там вешаний на label onchange/onclick и т.д, зона действия начинается с $('.results') все радио кнопки которые в нем находятся(а их может быть не одна), при клике по label добавляли класс на этот label, при выборе другого label(радио кнопки), естественно класс уже ставился на эту, так как 2 выбрано кнопки не может быть одновременно.

ТИПА что-то

$('#results input:radio').change(function() { // все радио кнопки которые находятся в контейнере #results
    $(this).addClass("myclass");                    // на тот label(по идее они работают в связке с radio кнопкой - кнопка радио всеравно чекается от того что я жму по label рядом с ней который) который был нажат вешается класс.
});

ksa 26.03.2014 15:13
Цитата:
Сообщение от cha0s
при клике на label(не на радио кнопку), добавился класс на этот label, без ввода всяких там вешаний на label onchange/onclick
При клике но без onclick... Это сильно! :D

cha0s 26.03.2014 15:22
Цитата:
Сообщение от ksa (Сообщение 304487)
При клике но без onclick... Это сильно! :D
все сложно, это все просто не hard code, движок генерирует все эти inputi, вот как у меня выглядят радио кнопки

то есть сами радио кнопки display:none; а это их label такие как кнопки сделаны, при клике на label соответственно и выделывается radio кнопка просто этого не видно, ну и в конце передается то что выбрано, мне надо при клике по этому label(или radio кнопке - она ведь так и так выделяется), на этот label вешался класс:), короче вешался там где radio button как :checked:) я имел введу что такой вариант мне не подойдет типа:

<input style="display:none;" type="radio" name="option[242]" value="92" id="option-value-92">
    <label ONCLICK="......." class="spanradio" for="option-value-92">5 x 7</label>


а вот типа такого

$('......').change(function() подойдет, где не нужно дописывать к каждому label onclick=""... вообщем надеюсь что я не запутал)))

ksa 26.03.2014 15:32
Цитата:
Сообщение от cha0s
а вот типа такого

$('......').change(function()
подойдет
А чей чеиньч-то? :D
Коли у тебя клики по лабелям идут...

Цитата:
Сообщение от cha0s
все сложно
Так это может просто ты сам все усложняешь? :)

ksa 26.03.2014 15:36
Цитата:
Сообщение от cha0s
движок генерирует все эти input
Ну и пусть генерит...

Цитата:
Сообщение от cha0s
зона действия начинается с 
$('.results')
Как вариант (даже для обновляемого контента)...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
.on {
	color: green;
}
</style>
<script type='text/javascript'>
$(function (){
	$('.results').on('click','label',function (){
		$(this.parentNode).find('label.on').removeClass('on');
		$(this).addClass('on');
	});
});
</script>
</head>
<body>
<div class="results">
	<div id="results">
		<div position_title="1" id="option-242" class="option radio">
			<div class="fields" style="margin-top:1px;">
				<input style="display:none;" type="radio" name="option[242]" value="92" id="option-value-92">
				<label class="spanradio" for="option-value-92">5 x 7</label>
				<input style="display:none;" type="radio" name="option[242]" value="93" id="option-value-93">
				<label class="spanradio" for="option-value-93">6 x 6</label>
			</div>
		</div>
	</div>
</div>
</body>
</html>

cha0s 26.03.2014 16:12
Спасибо! то что нужно! а главное просто!:thanks: Вопрос закрыт.

ksa 26.03.2014 16:49
Цитата:
Сообщение от cha0s
то что нужно
Только это как раз вариант с навешиванием события. :)


Часовой пояс GMT +3, время: 09:46.