javascript - 在 Javascript 中对各种单选按钮进行多次检查

Question

我正在开发一个应用程序，它显示 2 个图表并包含用于更改时间间隔的单选按钮。例如，我想做的是，如果我在第二组单选按钮中选择每月，则第一组也应该检查该选项。

<div class="panel-radio-buttons">
    <form id="SettingMixRadioButtonsGroup1">
        <label class="radio-inline"><input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient"  
                           ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
        <label class="radio-inline"><input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient2"
                           ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()' >Weekly</label>
        <label class="radio-inline"><input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient3"
                           ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
    </form>
</div>

<div class="panel-radio-buttons">
    <form id="SettingMixRadioButtonsGroup2">
        <label class="radio-inline"><input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient4"  
                           ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
        <label class="radio-inline"><input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient5"
                           ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()'  ng-checked="togglePefsBifsTimeFrame2" >Weekly</label>
        <label class="radio-inline"><input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient6"
                           ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
    </form>
</div>

我尝试在 JS 中使用以下代码进行检查:

$scope.SetDay= function(){
    document.getElementById("SettingMixRadioButtonsGroup1").child[0].checked = true;
    document.getElementById("SettingMixRadioButtonsGroup2").child[0].checked = true;
};

但它不会对子元素执行检查...如果我使用父元素，它可以正常工作，但它不是一个非常可扩展的解决方案

Answer 1

这将为单选按钮的 change 事件创建一个处理程序。它选择 panel-radio-buttons 下具有相同 value 属性的所有单选按钮，并将其 checked 属性设置为触发的元素的属性事件。

$("input[type=radio][name=radio1]").change(function() {
  var val = $(this).attr("value");
  var radio = $(".panel-radio-buttons input[type=radio][name=radio1][value=" + val + "]");
  radio.prop("checked", $(this).is(":checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-radio-buttons">
  <form id="SettingMixRadioButtonsGroup1">
    <label class="radio-inline">
            <input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient" ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
    <label class="radio-inline">
            <input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient2" ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()'>Weekly</label>
    <label class="radio-inline">
            <input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient3" ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
  </form>
</div>

<div class="panel-radio-buttons">
  <form id="SettingMixRadioButtonsGroup2">
    <label class="radio-inline">
            <input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient4" ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
    <label class="radio-inline">
            <input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient5" ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()' ng-checked="togglePefsBifsTimeFrame2">Weekly</label>
    <label class="radio-inline">
            <input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient6" ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
  </form>
</div>