Радиокнопка нажата с меткой

Question

У меня есть несколько переключателей. В коде у меня есть разные картинки, соответствующие различным функциям.

Пользователь должен знать, на какой переключатель нажата кнопка. Поэтому я пытаюсь найти способ изменить фон переключателя после его нажатия. Для того, чтобы код работал, <label> должен оставаться на уровне арки <input>.

<div class="radio-toolbar"> 

     <label class="BottomLeft"> 
      <input id="tech" type="radio" ng-model="SelectedLayout" value="BottomLeft" /> 
     </label> 

     <label class="BottomRight"> 
      <input id="tech" type="radio" ng-model="SelectedLayout" value="BottomRight" /> 
     </label> 

     <label class="Dual"> 
      <input id="tech" type="radio" ng-model="SelectedLayout" value="Dual" /> 
     </label> 

     <label class="DualRight"> 
      <input id="tech" type="radio" ng-model="SelectedLayout" value="DualRight" /> 
     </label> 

     <label class="Duplex"> 
      <input id="tech" type="radio" ng-model="SelectedLayout" value="Duplex" /> 
     </label> 

     <label class="Custom"> 
      <input id="tech" type="radio" ng-model="SelectedLayout" value="Custom" /> 
     </label> 
    </div> 

Вот JSfiddle

Answer 1

Вы можете попробовать это:

$('input[type=radio]') 
    .on('click', function() { 
     var $label = $(this).closest('label'); 
     $('label').not($label).css('background-color', 'green'); 
     $label.css('background-color', '#2C8BDE'); 
}); 

Вот FIDDLE.

Кроме того, у вас должно быть уникальное ID в html.

Answer 2

Чтобы работать с вашими метками, ваш код должен выглядеть так. Проблема в том, что у вас не может быть одинакового идентификатора для всех элементов. Идентификатор уникален, и если вы хотите работать с меткой, вы должны установить атрибут for="#" в свой элемент <label></label>. Так, помните, что <label></label> имеет атрибут for="", а атрибут for="" работает с идентификатором в теге <input />.И я сделал ваши радиокнопки не кратные, поэтому удалите атрибут name="", чтобы работать как несколько.

<div class="radio-toolbar"> 

      <label for="first"> 
       Tech<input id="first" type="radio" ng-model="SelectedLayout" name="radioButton" value="BottomLeft" /> 
      </label> 

      <label for="second"> 
       AnotherOne<input id="second" type="radio" ng-model="SelectedLayout" name="radioButton" value="BottomRight" /> 
      </label> 

      <label for="third"> 
       Third<input id="third" type="radio" ng-model="SelectedLayout" name="radioButton" value="Dual" /> 
      </label> 

      <label for="fourth"> 
       Fourth<input id="fourth" type="radio" ng-model="SelectedLayout" name="radioButton" value="DualRight" /> 
      </label> 

      <label for="fifth"> 
       Fifth<input id="fifth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Duplex" /> 
      </label> 

      <label for="sixth"> 
       Sixth<input id="sixth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Custom" /> 
      </label> 
     </div> 

Answer 3

Постарайтесь this .I изменил цвет фоновый проверил переключатель на оранжевый с JQuery

$('input[type=radio]') 
    .on('click', function() { 
     var $label = $(this).closest('label'); 
     $('label').not($label).css('background-color', 'green'); 
     $label.css('background-color', '#2C8BDE'); 
});