Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Кастомные Radio кнопки (https://javascript.ru/forum/misc/53241-kastomnye-radio-knopki.html)

DemiuS 26.01.2015 16:40

Кастомные Radio кнопки
 
Здравствуйте, есть формочка с radio кнопками:
<div class="radio-check">
		<div class="check-wrap">
			<label class="check-field active" value="1">
				<span class="icon"></span>
				<em>Текст1</em>
				<input type="radio" name="ceiling" id="ceiling-gipsokarton" value="1" checked>
			</label>
			<label class="check-field" value="2">
				<span class="icon"></span>
				<em>Текст2</em>
				<input type="radio" name="ceiling" id="ceiling-gipsokarton" value="2">
			</label>
			<label class="check-field" value="3">
				<span class="icon"></span>
				<em>Текст3</em>
				<input type="radio" name="ceiling" id="ceiling-gipsokarton" value="3">
			</label>
		</div>
	</div>


Я долго мучался и не смог понять, как можно сделать стиль для отдельного блока который я выбрал, пытался через this менять, но бред выходит.

Царь Леонид 26.01.2015 17:01

ну почему же бред? Id должны быть разные только
<script>
function ch(x){
           x.parentElement.style.color = "red";	 
}
</script>
<div class="radio-check">
		<div class="check-wrap">
			<label class="check-field active" value="1">
				<span class="icon"></span>
				<em>Текст1</em>
				<input type="radio" onchange="ch(this)" name="ceiling" id="ceiling-gipsokarton" value="1" checked>
			</label>
			<label class="check-field" value="2">
				<span class="icon"></span>
				<em>Текст2</em>
				<input type="radio" onchange="ch(this)" name="ceiling" id="ceiling-gipsokarton" value="2">
			</label>
			<label class="check-field"  value="3">
              <span class="icon"></span>
				<em>Текст3</em>
				<input type="radio" onchange="ch(this)" name="ceiling" id="ceiling-gipsokarton" value="3">
			</label>
		</div>
	</div>

danik.js 26.01.2015 17:21

Цитата:

Сообщение от DemiuS
Форум » Javascript » Общие вопросы Javascript » Кастомные Radio кнопки

Причем тут JavaScript? Вы думайте хоть иногда, прежде чем тему создавать.

AntonMs 26.01.2015 17:23

Я у себя с чекбоксами так сделал
$('.label').click(function(){$(this).toggleClass('active')})

и в css файле прописал: [type='checkbox']{display:none;}


В JQuery есть выборка по выбранным radio кнопкам: $("input:radio:checked")

danik.js 26.01.2015 17:36

Там не нужен js вообще

DemiuS 26.01.2015 21:44

Мне нужен менять значение label=class, в тут-то я и не смог.

DemiuS 26.01.2015 21:45

Цитата:

Сообщение от danik.js (Сообщение 353561)

Ну, а я если я хочу это через JS сделать, что в этом плохого?

danik.js 26.01.2015 23:26

Цитата:

Сообщение от DemiuS
Ну, а я если я хочу это через JS сделать, что в этом плохого?

Делай. Главное чтобы без JS обычные чекбоксы отображались.
А то зайдет на сайт такой вот боязливый покупатель как я, с NoScript, и не сможет ничего купить.

DemiuS 26.01.2015 23:35

Ну это для формы с отправкой на мыло, форма не очень важная.
Я просто как раз сейчас изучаю JS и мне очень интересны вот такие функции)

DemiuS 27.01.2015 16:10

Снова требую помощи, ни чего не получилось -_-


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