Как обернуть текст внутри label в тег?

127

22 декабря 2019, 06:50

Всем привет! Хочу попросить совет. Имеется такой код HTML:

<div class="controls">
<label for="elements[06158ec8-ad32-4dff-8323-48d4eeeb1ff1][option][]muzhskoj" id="elements[06158ec8-ad32-4dff-8323-48d4eeeb1ff1][option][]muzhskoj-lbl" class="radio">
<input type="radio" name="elements[06158ec8-ad32-4dff-8323-48d4eeeb1ff1][option][]" id="elements[06158ec8-ad32-4dff-8323-48d4eeeb1ff1][option][]muzhskoj" value="muzhskoj">мужской
</label>
<label for="elements[06158ec8-ad32-4dff-8323-48d4eeeb1ff1][option][]zhenskij" id="elements[06158ec8-ad32-4dff-8323-48d4eeeb1ff1][option][]zhenskij-lbl" class="radio">
<input type="radio" name="elements[06158ec8-ad32-4dff-8323-48d4eeeb1ff1][option][]" id="elements[06158ec8-ad32-4dff-8323-48d4eeeb1ff1][option][]zhenskij" value="zhenskij">женский
</label>

Необходимо стилизовать радиокнопки (и чекбоксы, которые выполнены таким же образом), но проблема в том, что не удаётся обернуть значение самого тега label в хоть какой-нибудь тег.

Подскажите пожалуйста, как это реализовать, используя JQuery. Заранее благодарен!

Answer 1

Это дело находит все инпуты типа 'radio' и через after() добавляет указанное после них:

(function(){
  $("input[type='radio']").after('<span class="checkmark"><\/span>');
})();

А уже с этим можно начать делать свой стиль. Можно на всякий случай добавить родительскому label-у класс radio, если у него не окажется такого класса.

  $("input[type='radio']").parent().addClass('radio');

(function(){ 
  $("input[type='radio']").after('<span class="checkmark"><\/span>'); 
  $("input[type='radio']").parent().addClass('radio'); 
})();

.radio { 
  display: block; 
  position: relative; 
  padding-left: 35px; 
  margin-bottom: 12px; 
  cursor: pointer; 
  font-size: 22px; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
} 
 
/* Hide the browser's default radio button */ 
.radio input { 
  position: absolute; 
  opacity: 0; 
  cursor: pointer; 
} 
 
/* Create a custom radio button */ 
.checkmark { 
  position: absolute; 
  top: 0; 
  left: 0; 
  height: 25px; 
  width: 25px; 
  background-color: #eee; 
  border-radius: 50%; 
} 
 
/* On mouse-over, add a grey background color */ 
.radio:hover input ~ .checkmark { 
  background-color: #ccc; 
} 
 
/* When the radio button is checked, add a blue background */ 
.radio input:checked ~ .checkmark { 
  background-color: #2196F3; 
} 
 
/* Create the indicator (the dot/circle - hidden when not checked) */ 
.checkmark:after { 
  content: ""; 
  position: absolute; 
  display: none; 
} 
 
/* Show the indicator (dot/circle) when checked */ 
.radio input:checked ~ .checkmark:after { 
  display: block; 
} 
 
/* Style the indicator (dot/circle) */ 
.radio .checkmark:after { 
 	top: 9px; 
	left: 9px; 
	width: 8px; 
	height: 8px; 
	border-radius: 50%; 
	background: white; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
Бубу?<br><br> 
<label class="radio"> 
  <input type="radio" name="moo">Да 
</label> 
<label class="radio"> 
  <input type="radio" name="moo">Нет 
</label> 
 
Или не Бубу? <br><br> 
<label class="radio"> 
  <input type="radio" name="radio">Да 
</label> 
<label class="radio"> 
  <input type="radio" name="radio">Нет 
</label>

Или: JsFiddle ДЕМО