Javascript jQuery只能读取select选项一次？

我想我可能发现了一个无法解决的bug

我有一个包含一些html5数据的HTML下拉列表。在更改时，jquery应该找到所选选项并从该选项中提取数据，然后选中一些复选框

除了转到JSFIDLE并尝试之外，我不知道如何解释它。第一个选项应选中前半个复选框，第二个选项应选中所有复选框

我希望这里有人能告诉我我做错了什么。请确保更改选择框3-4以获得感兴趣的行为

最好的， 瑞安

HTML

是一样的

用于设置选中状态，而不是

---

演示：

请确保单击“选择”框3-4次以查看有趣的行为

<h2>Features</h2>

<div class="form-group">
    <div class="col-md-12 required">
        <label for="feature_groups">Feature Group(Quick Select)</label>
        <select name="feature_groups" class="form-control" id="feature_groups">
            <option value="">Select One</option>
            <option data-group='3,4,7,8'>2reg</option>
            <option data-group='1,2,3,4,5,6,7,8'>fg1</option>
        </select>
    </div>
</div>
<label for="Features">Features</label>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][4][feature_id]" value="4" class="feature_checks" id="Feature4FeatureId" />
    <label for="Feature4FeatureId">Aux Input</label>
</div>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][3][feature_id]" value="3" class="feature_checks" id="Feature3FeatureId" />
    <label for="Feature3FeatureId">Bose Stereo</label>
</div>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][8][feature_id]" value="8" class="feature_checks" id="Feature8FeatureId" />
    <label for="Feature8FeatureId">Electric Stabailzers</label>
</div>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][7][feature_id]" value="7" class="feature_checks" id="Feature7FeatureId" />
    <label for="Feature7FeatureId">Electric Suspension Adjustment</label>
</div>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][6][feature_id]" value="6" class="feature_checks" id="Feature6FeatureId" />
    <label for="Feature6FeatureId">Floor Mats</label>
</div>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][2][feature_id]" value="2" class="feature_checks" id="Feature2FeatureId" />
    <label for="Feature2FeatureId">Gold plated rims</label>
</div>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][1][feature_id]" value="1" class="feature_checks" id="Feature1FeatureId" />
    <label for="Feature1FeatureId">Latches</label>
</div>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][5][feature_id]" value="5" class="feature_checks" id="Feature5FeatureId" />
    <label for="Feature5FeatureId">Premium Rims</label>
</div>

$(document).ready(function () {
    $('#feature_groups').change(function () {
        console.log($('option:selected', this));
        $('.feature_checks').attr('checked', false);
        if ($('#feature_groups option:selected') != '') {
            var arrData = $('option:selected', this).data('group').split(',');
            for (i in arrData) {
                $(".feature_checks[value='" + arrData[i] + "']").attr('checked', true);
            }
        }
    });
});

$(document).ready(function () {
    $('#feature_groups').change(function () {
        console.log($('option:selected', this));
        $('.feature_checks').prop('checked', false);
        if ($('#feature_groups option:selected') != '') {
            var arrData = $('option:selected', this).data('group').split(',');
            for (i in arrData) {
                $(".feature_checks[value='" + arrData[i] + "']").prop('checked', true);
            }
        }
    });
});