Jquery 验证<li>多个<ul>

Question

我有一个像这样的 HTML 结构，其中包含一些复选框和单选按钮

<div class="companyQuestions">
    <h4 class="subHead">Company Questions</h4>
    <span class="question">Question 1</span>
    <ul class="selectFrame special">
        <li><input type="checkbox" name="rent_or_own" value="rent" /></li>
        <li><input type="checkbox" name="rent_or_own" value="own" /></li>
        <li><input type="checkbox" name="rent_or_own" value="both" /></li>
        <li><input type="checkbox" name="rent_or_own" value="none" /></li>
    </ul>
    <span class="question">Question 2</span>
    <ul class="selectFrame multipleLines">
        <li><input type="checkbox" name="services_in_particular_area" value="central"/></li>
        <li><input type="checkbox" name="services_in_particular_area" value="east" /></li>
        <li><input type="checkbox" name="services_in_particular_area" value="west" /></li>                                    
        <li><input type="checkbox" name="services_in_particular_area" value="europe" /></li>
    </ul>                                
    <span class="question">Question 3</span>
    <ul class="selectFrame special">
        <li><input type="radio" name="store_sensitive_information" value="yes" /></li>
        <li><input type="radio" name="store_sensitive_information" value="no" /></li>
        <li><input type="radio" name="store_sensitive_information" value="not_sure" /></li>
    </ul>
</div>

我想确保每个<ul>至少有一个输入元素被选中。 我有以下验证脚本。

<script>
    $(':input.labelauty').change(function(){
        $(this).parent().parent().addClass('chosen');
    });

    var chosen_flag = 1;
    $(".selectFrame").each(function(){
        if(!($(this).hasClass("chosen"))){
            chosen_flag = 0;;
        }
    })
    if (!chosen_flag) {
        alert('Answer All Questions');
    }
    else{
        alert('Congratulations. Your form is submitted');
    }
</script>

这适用于单选按钮。 但是对于复选框，如果选择和取消选择项目，此脚本会中断。 我也尝试过其他一些解决方案，但都是徒劳的。 请帮我解决一些逻辑问题。 提前致谢 ：）

Answer 1

小提琴演示

var ul = $('.selectFrame'), //cache selector
    len = ul.length;     //length of all ul
ul.find('input').change(function () { //change event on input inside ul
    if (ul.has('input:checked').length == len) alert('done'); //if ul having checked checkbox is equal to all ul length than do something
    else alert('Answer All Questions');
});

。改变（）

。已（）