Javascript-форум - Кастомные Radio кнопки

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Кастомные Radio кнопки (https://javascript.ru/forum/misc/53241-kastomnye-radio-knopki.html)

Кастомные 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 менять, но бред выходит.

ну почему же бред? 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>

Цитата:

Сообщение от DemiuS

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

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

Я у себя с чекбоксами так сделал

$('.label').click(function(){$(this).toggleClass('active')})

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

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

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

Цитата:

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

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

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

Цитата:

Сообщение от DemiuS

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

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

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

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

Я дал ссылку - открываешь, смотришь туториалы. На css - и это серьезный плюс.

DemiuS,
чтобы использовать css нужно менять структуру сначала input type="radio" потом label - если неправ подскажите решение.
а так возможен такой вариант ... полифил classList для старых браузеров

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    background-color: #66FF66;
  }

 label{
    width: 135px;
    display:block;
    margin:10px;
    padding-left:8px;
    background:url("http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/checks.png") no-repeat 0 0;
    background-color:#FF66CC;
    line-height:24px;
    border:#000000 1px solid;
    border-radius:15px;
    color:#6f8686;
    text-shadow:0 0 1px rgba(111,134,134,0.3);
  }



  label.check{
    text-shadow:-2px 2px #346392;
    font-size:24px;
    color:#fff;
    background-position:0 -24px;
  }



 input[type=radio]{
    width:28px;
    margin:0;
    padding:0;
    opacity:0;
  }

  em{
    margin-left: 24px;
  }

  </style>
</head>

<body>
<script>
function ch(x){
          var inputs = document.getElementsByName(x.name || "ceiling");
          for (var i=0; i<inputs.length; i++)  {
          inputs[i].parentNode.classList[inputs[i].checked ? "add" : "remove"]("check") }
}
window.onload = ch
</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>

</body>

</html>

Цитата:

Сообщение от рони

inputs[i].checked ? "add" : "remove"

Вообще есть toggle(class:string, force:boolean), но параметр force добавили позже, в связи с чем он не работает в целом ряде старых версий браузеров. Впрочем, хороший полифилл это исправит.

danik.js,
ок буду знать ...
а что такое old так и не подскажешь --
input[type=checkbox]:not(old),
увидел тут http://code.stephenmorley.org/html-a...radio-buttons/
код css что выше взят оттуда

Цитата:

Сообщение от рони

not(old)

Я когда смотрел, еще вчера, то тоже не понял.
Щас только осенило - это походу барьер для старых браузеров. Смысл в том, чтобы эти правила игнорировались браузерами, не поддерживающими :not(). Я так думаю. Код не читал, так что не уверен.

danik.js,
спасибо за мысль