I have a situation similar to this:
$('.inset').click(function(){
if($('.inset').is(':checked')){
$('.box-shadow').css('boxShadow','inset');
}else{
$('.box-shadow').css('boxShadow','');
}
});
Essentially, when a checkbox is checked, it triggers one action and when it's not checked, it triggers another.
What I am aiming to achieve is that when the checkbox is checked, the boxShadow property (which currently is: box-shadow: 5px 5px 5px #000;
) changes to
box-shadow: inset 5px 5px 5px #000;
. When it's unchecked, it should revert back to: box-shadow: 5px 5px 5px #000;
.
The challenge here is that the other properties (5px 5px 5px #000) are not always static. Is there a way to dynamically handle this?
$('.inset').click(function(){
if($('.inset').is(':checked')){
$('.box-shadow').css('boxShadow','+inset');
}else{
$('.box-shadow').css('boxShadow','-inset');
}
});