Stil etwas, wenn etwas anderes überprüft

Question

Beispiel wie folgt:

<div class="control-group"> 
    <span class="radio"> 
     <input type="radio" class="input_radio" > 
    </span> 
    <label class="color_btn"> 
    <div class="inner_value"></div> 
    </label> 
</div> 

Im obigen Beispiel, ich brauche, wenn die Eingabe mit Klasse in den div box-shadow verwenden = inner_value geprüft. Irgendwelche Ideen dazu?

Answer 1

Wenn Sie die input aus der span ziehen, können Sie dies mit CSS allein mit einem Geschwisterselektor tun.

input:checked + .color_btn .inner_value { 
 
    box-shadow: 0 5px 5px #000; 
 
}

<div class="control-group"> 
 
    <input type="radio" class="input_radio" > 
 
    <label class="color_btn"> 
 
    <div class="inner_value">inner_value</div> 
 
    </label> 
 
</div>

Und hier ist ein Weg, es zu tun mit Javascript durch einen Event-Handler zum input Hinzufügen dann eine Klasse für den Schatten zuweisen.

document.getElementById('radio').addEventListener('click',function() { 
 
    document.getElementsByClassName('inner_value')[0].classList.add('shadow'); 
 
});

.shadow { 
 
    box-shadow: 0 5px 5px #000; 
 
}

<div class="control-group"> 
 
    <span class="radio"> 
 
     <input type="radio" class="input_radio" id="radio"> 
 
    </span> 
 
    <label class="color_btn"> 
 
    <div class="inner_value">inner_value</div> 
 
    </label> 
 
</div>

Answer 2

Neben Michaels' Antwort, dies ist ein JavaScript-Ansatz, der mit Kontrollkästchen

document.getElementsByClassName("input_radio")[0].onchange = function() { 
 
     if (this.checked === true) 
 
      document.getElementsByClassName("inner_value")[0].style.boxShadow = "2px 2px 5px #888888"; 
 
     else 
 
      document.getElementsByClassName("inner_value")[0].style.boxShadow = ""; 
 
    };

<div class="control-group"> 
 
    <span class="radio"> 
 
     <input type="radio" class="input_radio" > 
 
    </span> 
 
    <label class="color_btn"> 
 
    <div class="inner_value">example</div> 
 
    </label> 
 
</div>

Answer 3

Nun ist es natürlich möglich, funktioniert auch mit jQuery:

$(".input_radio").change(function() { 
 
    if (this.checked) { 
 
    $(this).closest('.control-group').find('.inner_value').addClass('has-shadow'); 
 
    } 
 
});

.has-shadow { 
 
    box-shadow: 0 0 3px black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="control-group"> 
 
    <span class="radio"> 
 
     <input type="radio" class="input_radio" > 
 
    </span> 
 
    <label class="color_btn"> 
 
    <div class="inner_value">Inner value div</div> 
 
    </label> 
 
</div>