CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JasonDavis
JasonDavis

Reputation: 48943

How to apply CSS style to a Sibling Label field of a Div?

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

Upvotes: 0

Views: 1788

Answers (7)

louisbros
louisbros

Reputation: 875

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.

Upvotes: 2

guioconnor
guioconnor

Reputation: 414

The straight answer is that you can't do exactly that with CSS only because there isn't a predecessor selector you can use.

However, if you can afford to swap the elements, then there is an elegant solution because there is an immediate successor selector you can use ("+").

.iradio_square-green.checked + [for=indoor-backing-radio-2] {
    border: 4px solid #559A08;
}

See the working code here: http://codepen.io/anon/pen/JKkht/?editors=110

There is even a (not necessarily immediate) successor selector ("~") that you can use to target successors further away. For instance, you could do this

http://codepen.io/anon/pen/lkwEK/?editors=110

Having said that the HTML in your example is a bit odd, maybe it makes sense in context but what it seems is that you are associating the label to a radio button elsewhere but it's a div that controls the "checked" state. This is not semantic and it's wasteful because you can have much more elegant solutions with proper form elements.

This example is a pure CSS solution for a common problem that could be what you need to solve.

http://codepen.io/anon/pen/yladt/?editors=111

(This example is an eyesore but couple it with good visual design and the results are quite slick and powerful)

Of course, if you want to use JS everything is possible.

Upvotes: 1

Vishal Nair
Vishal Nair

Reputation: 2191

remove that <br> tag and follow this code -- > 

$(document).ready(function(){
   $(".checked").prev("label").addClass( "myborderstyle" );

});

and write CSS styling for that class like this -- >

.myborderstyle{
    border: 4px solid #559A08;
}

JS FIDDLE DEMO
This one is much simpler and also semantically clean because it keeps the CSS styling part away from javascript and let css do the job. It will just add the styling to whichever label is before the class checked
Note: If you want to specifically target checked class which also has the iradio_square-green class then you must use $(".iradio_square-green.checked")

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

With jQuery, I'd suggest something similar to the following:

$('input[type="radio"]').on('change', function(){
    var that = this,
        state = that.checked;
    // this *adds* the 'checked' class-name when
    // the radio is checked (I'm assuming that
    // something similar happens somewhere in your code):
    $(that).closest('div').toggleClass('checked', state);

    // selects the label for the affected radio and
    // adds, or removes, the 'radioChecked' class
    // if the radio is, or is not, checked:
    $('label[for="' + that.id + '"]').toggleClass('radioChecked', state)
});

JS Fiddle demo.

More specifically-useful answers would be possible if we knew the precise HTML structure you're using, and the relevant already-working JavaScript you're using.

References:

Upvotes: 1

JohanVdR
JohanVdR

Reputation: 2878

The :checked pseudo class works with radio and checkbox inputs only. Using a checked class would only be necessary for IE8 and below. When you click the associated label the input will be set to checked is true.

The idea is you than style the label:

input:checked + label {
 // set a checked style
}

http://jsfiddle.net/QfNXL/8/

Upvotes: 1

Tawfiq Rbouh
Tawfiq Rbouh

Reputation: 26

$('.iradio_square-green.checked').prev().prev('label').css({"border-color": "#559A08","border-width":"4px","border-style":"solid"});

This should work :)

demo : http://jsfiddle.net/rbtaw/3RTUt/

Upvotes: 1

Pazza22
Pazza22

Reputation: 564

You can use the .prev() JQuery method to reach the previous sibling. https://api.jquery.com/prev/

You can use the .hasClass() method for checking if your div has the required class. https://api.jquery.com/?s=hasclass

Hope this helps.

Upvotes: 1

Related Questions