如何将CSS样式应用于Div的Sibling Label字段？(How to apply CSS style to a Sibling Label field of a Div?)

基于下面的这个HTML代码，我选择了带有iradio_square-green checked类的Div，我需要以某种方式使上面的<label>在该标签下面的Div上存在该类checked时将某种CSS样式应用于该Label。

<label for="indoor-backing-radio-2"> <span>Clear Backing</span> </label><br> <div class="iradio_square-green checked" style="position: relative;"> // other code </div>

因此，当Div有一个被checked的类时，那个Div上方的<label>字段将需要应用一种border: 4px solid #559A08;样式border: 4px solid #559A08; 到<label> 。

我不确定这是否只能用CSS完成或者是否需要JavaScript？ 在任何一种情况下，我都可以使用一些帮助来获得此功能。 一旦我开始工作，它将适用于数百个领域。 谢谢你的帮助

Based on this HTML code below, the Div with classes iradio_square-green checked I need to somehow make the <label> above it apply a certain CSS style to that Label when that class checked exist on the Div below the Label.

<label for="indoor-backing-radio-2"> <span>Clear Backing</span> </label><br> <div class="iradio_square-green checked" style="position: relative;"> // other code </div>

So when the Div has a class of checked then the <label> field immediately above that Div will need to apply a style of border: 4px solid #559A08; to the <label>.

I'm not sure if this can be done with just CSS or if JavaScript is required? In either case I could use a little help in getting this functionality. Once I get it working, it will apply to hundreds of fields. Thanks for any help

最满意答案

您正在使用的插件提供了一个名为ifToggled的事件。 您可以为此事件提供回调，以便切换相应标签上的“已检查”类：

var labels = document.getElementsByTagName('label'); $('input').iCheck({ checkboxClass: 'icheckbox_polaris', radioClass: 'iradio_polaris' }); $('input').on('ifToggled', function(event){ // find the corresponding label of this input and toggle the class for(var j = 0;j < labels.length;j++){ if(labels[j].htmlFor === event.currentTarget.id){ $(labels[j]).toggleClass('checked'); break; } } });

在这里演示。

以这种方式查找标签意味着您不需要依赖DOM元素的特定顺序。

The plugin you're using provides an event called ifToggled. You could provide a callback for this event that toggles a 'checked' class on the corresponding label:

var labels = document.getElementsByTagName('label'); $('input').iCheck({ checkboxClass: 'icheckbox_polaris', radioClass: 'iradio_polaris' }); $('input').on('ifToggled', function(event){ // find the corresponding label of this input and toggle the class for(var j = 0;j < labels.length;j++){ if(labels[j].htmlFor === event.currentTarget.id){ $(labels[j]).toggleClass('checked'); break; } } });

Demo here.

Looking for the label this way means you don't need to rely on a specific order of DOM elements.

如何将CSS样式应用于Div的Sibling Label字段？(How to apply CSS style to a Sibling Label field of a Div?)

基于下面的这个HTML代码，我选择了带有iradio_square-green checked类的Div，我需要以某种方式使上面的<label>在该标签下面的Div上存在该类checked时将某种CSS样式应用于该Label。

<label for="indoor-backing-radio-2"> <span>Clear Backing</span> </label><br> <div class="iradio_square-green checked" style="position: relative;"> // other code </div>

因此，当Div有一个被checked的类时，那个Div上方的<label>字段将需要应用一种border: 4px solid #559A08;样式border: 4px solid #559A08; 到<label> 。

我不确定这是否只能用CSS完成或者是否需要JavaScript？ 在任何一种情况下，我都可以使用一些帮助来获得此功能。 一旦我开始工作，它将适用于数百个领域。 谢谢你的帮助

Based on this HTML code below, the Div with classes iradio_square-green checked I need to somehow make the <label> above it apply a certain CSS style to that Label when that class checked exist on the Div below the Label.

<label for="indoor-backing-radio-2"> <span>Clear Backing</span> </label><br> <div class="iradio_square-green checked" style="position: relative;"> // other code </div>

So when the Div has a class of checked then the <label> field immediately above that Div will need to apply a style of border: 4px solid #559A08; to the <label>.

I'm not sure if this can be done with just CSS or if JavaScript is required? In either case I could use a little help in getting this functionality. Once I get it working, it will apply to hundreds of fields. Thanks for any help

最满意答案

您正在使用的插件提供了一个名为ifToggled的事件。 您可以为此事件提供回调，以便切换相应标签上的“已检查”类：

var labels = document.getElementsByTagName('label'); $('input').iCheck({ checkboxClass: 'icheckbox_polaris', radioClass: 'iradio_polaris' }); $('input').on('ifToggled', function(event){ // find the corresponding label of this input and toggle the class for(var j = 0;j < labels.length;j++){ if(labels[j].htmlFor === event.currentTarget.id){ $(labels[j]).toggleClass('checked'); break; } } });

在这里演示。

以这种方式查找标签意味着您不需要依赖DOM元素的特定顺序。

The plugin you're using provides an event called ifToggled. You could provide a callback for this event that toggles a 'checked' class on the corresponding label:

var labels = document.getElementsByTagName('label'); $('input').iCheck({ checkboxClass: 'icheckbox_polaris', radioClass: 'iradio_polaris' }); $('input').on('ifToggled', function(event){ // find the corresponding label of this input and toggle the class for(var j = 0;j < labels.length;j++){ if(labels[j].htmlFor === event.currentTarget.id){ $(labels[j]).toggleClass('checked'); break; } } });

Demo here.

Looking for the label this way means you don't need to rely on a specific order of DOM elements.