Javascriptのさまざまなラジオボタンで複数のチェックを行う

Question

私は2つのグラフを表示し、時間間隔を変更するラジオボタンを含むアプリケーションを開発しています。 私がしようとしているのは、たとえば、私が第2セットのラジオボタンで月を選択した場合、最初のセットにもそのオプションチェックが必要です。

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

をしかし、それは、子要素のチェックを実行しません...私は親を使用している場合、それは正常に動作します：私はJSに次のコードを使用してチェックしてみた

<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> 

非常にスケーラブルなソリューションではありません

Answer 1

これは、ラジオボタンのchangeイベントのハンドラを作成します。同じvalue属性を持つpanel-radio-buttonsの下にあるすべてのラジオボタンを選択し、イベントをトリガーした要素のプロパティに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>