单击标签的单选按钮

我有多个单选按钮。在我有的代码中，它们是与不同功能对应的不同图片。单击标签的单选按钮

用户必须知道哪个单选按钮被点击。因此，我试图找到一种方法来改变单击按钮后单选按钮的背景。为了使代码正常工作，<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

来源

2015-11-05 MarLen

？ “id”的重点在于它允许你通过它的'id'来查找元素。但是，只有当你的'id's是唯一的。 –

ID应该始终是唯一的 – guradio

我有一段代码，我通过ID获取元素。由于他们都必须相互对应，所以我使用了相同的ID。这不是完美的方式，但我使用必要的代码'initDropDown（document.getElementById（'tech'））;' – MarLen

你可以试试这个：

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

这里是FIDDLE。

另外，您必须在html中有唯一的ID's。

来源

2015-11-05 07:41:50 Beginner

谢谢！感谢您的建议。我会改变ID的。 – MarLen

要使用您的标签，您的代码应该看起来像这样。问题是，您无法为所有元素使用相同的ID。 ID是唯一的，如果要使用标签，则必须将for="#"属性放入您的<label></label>元素中。因此，请记住<label></label>与for=""属性一起使用，并且for=""属性与<input />标记中的id一起使用。并且我制作了您的单选按钮不是多个，因此请删除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>

来源

2015-11-05 07:51:41

尽量this。我已经改变backgorund为什么您使用的是相同的`id`您所有的输入颜色检查单选按钮，橙色与jquery

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

来源

2015-11-05 07:56:14

单击标签的单选按钮

回答

相关问题