如何通过使用jQuery检查父元素的类

Question

This is my second script in jquery. What I want to do:

<span class="">
    <input name="personalData1" id="personalData1" value="0" checked="checked" type="checkbox">
</span>

This is default. When user click on this input field, the system add class checked to span. So the results is:

<span class="checked">
    <input name="personalData1" id="personalData1" value="0" checked="checked" type="checkbox">
</span>

I want to change value of this input. If it's checked than value is 1 in other way it will be 0. My code:

$(document).ready(function () {
    $("#personalData1").change(function () {
        $('#opc_payment_methods-content').removeClass('hide');

        if ($('#personalData1 > span').hasClass('checked')) {
            window.alert('ok');
        }
    });
});

Something is wrong with this if statement, I can not get in and display alert. Thanks for any help.

Kind regards

Answer 1

You should use parent method, for more information Jquery .parent()

So in your function it will be:

$(document).ready(function () {
    $("#personalData1").change(function () {
        $('#opc_payment_methods-content').removeClass('hide');

        if ($('#personalData1').parent().hasClass('checked') == false) {
            window.alert('ok');
            $('#personalData1').parent().addClass('checked');
        }
    });
});

Hope it helps,

Answer 2

Your referencing the checkbox $('#personalData1 > span') as the parent. instead do this:

 if ($('#personalData1').parent().hasClass('checked')) {
     window.alert('ok');
  }