jquery .val() not returning correct value

Question

In the below function I want to show and hide an element based on other options selected on the page (radio buttons). The problem is, the var complianceMember always returns the first value for the set of radio buttons it's part of and not the selected value, why is this? The other two variables return the correct values.

$(document).ready(function() {
    $('input[name="waste-management-plan"]').change(function () {

        var producerType = $('input[name="producertype"]').val();
        var complianceMember = $('input[name="compliance-member"]').val();

        if ($(this).val() == 'Y' && complianceMember == 'Y' && producerType == 'both' ) {
            $('.producerOp3').show();
        } else {
            $('.producerOp3').hide();
            console.log( $(this).val(),complianceMember,producerType );
        }
    });
});

Answer 1

You need to use a filter to find the checked radio button and then get its value. You can use the :checked selector

var complianceMember = $('input[name="compliance-member"]:checked').val();

Answer 2

因为您提到了单选组，所以必须获取选中的单选按钮的值

var complianceMember = $('input[name="compliance-member"]:checked').val();