kiasati kiasati - 1 month ago 8
CSS Question

changing the style of an input element's parent

i wanna change the parent's style of an input element, when its checked

<div> <!--- this is the parent element --->
<input type="radio" data-dynamic-update="1" name="virtuemart_paymentmethod_id" id="payment_id_3" value="3" checked="checked">
</div>


i found this after googling:

var x = document.getElementById("payment_id_3");
x.addEventListener("click", function(){
$(x).parent().css({"background-color": "green", "border": "1px solid green"});
});


but it doesn't work.. how can i do this?

Answer

If you want Enable + Disable values, this is probably what you are looking for:

 $('#payment_id_3').click(function(){
    if (this.checked === true) { //Checked CSS
             $('#payment_id_3').parent().css({
                'background-color': 'green',
                'border': '1px solid green'
            });
        }
        else  {         // unchecked CSS
             $('#payment_id_3').parent().css({
                                'background-color': 'red',
                        'border': '1px solid black'
                });
        }
});

NOTICE: I've changed the "radio" to a checkbox.