ブートストラップ/ JQuery - ラジオボタングループイベント機能

Question

私の目標は、グループ内のどのラジオボタンが選択されているかに応じて機能を実行することです。他の投稿を使用して、私はベロースクリプトを実装することができました。私が遭遇しているエラーは次のとおりです： 1）私がデフォルトでチェックすると宣言した最初のボタンは、関数を呼び出しません。チェックされた属性をボタンから削除すると、他のボタンと同じように機能します。 2）各ボタンは一度しか動作しません。たとえば、ボタン2をクリックすると、適切な機能が起動します。次に、ボタン3をクリックすると、ボタン3も正常に機能します。問題は、私がボタン2に戻ろうとしたときです。もう2回は発砲しません。

jQueryの

$("#btn-group-data :input").on("change",function() { 
    switch (this.value) { 
     case "radar": 
      console.log(this.value); 
      //do stuff... 
      break; 
     case "watches": 
      console.log(this.value); 
      //do stuff... 
      break; 
     case "warnings": 
      console.log(this.value); 
      //do stuff... 
      break; 
     case "temp": 
      console.log(this.value); // points to the clicked input button 
      //do stuff... 
      break; 
     case "precip": 
      console.log(this.value); // points to the clicked input button 
      //do stuff... 
      break; 
     case "snow": 
      console.log(this.value); // points to the clicked input button 
      //do stuff... 
      break; 
    } 
}); 

BUTTON-HTML

<div id="map-container" class="container-fluid"> 
    <div id="map-div"> 
     <div id="btn-group-data" data-toggle="buttons"> 
      <label class="btn btn-primary active"> 
       <input type="radio" name="radar" value="radar" id="radar" autocomplete="off" checked="" > Radar 
      </label> 
      <label class="btn btn-primary "> 
       <input type="radio" name="watches" value="watches" id="watches" autocomplete="off"> Watches 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="warnings" value="warnings" id="warnings" autocomplete="off"> Warnings 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="temp" value="temp" id="temp" autocomplete="off"> Temperature 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="precip" value="precip" id="precip" autocomplete="off"> Precipitation 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="snow" value="snow" id="snow" autocomplete="off"> Snow 
      </label> 
     </div> 
    </div> 
</div> 

Answer 1

あなたはこの作品、この

<div id="map-div"> 
    <div id="btn-group-data" data-toggle="buttons"> 
     <label class="btn btn-primary active"> 
      <input type="radio" name="radar" value="radar" id="radar" autocomplete="off" checked="" > Radar 
     </label> 
     <label class="btn btn-primary "> 
      <input type="radio" name="radar" value="watches" id="watches" autocomplete="off"> Watches 
     </label> 
     <label class="btn btn-primary"> 
      <input type="radio" name="radar" value="warnings" id="warnings" autocomplete="off"> Warnings 
     </label> 
     <label class="btn btn-primary"> 
      <input type="radio" name="radar" value="temp" id="temp" autocomplete="off"> Temperature 
     </label> 
     <label class="btn btn-primary"> 
      <input type="radio" name="radar" value="precip" id="precip" autocomplete="off"> Precipitation 
     </label> 
     <label class="btn btn-primary"> 
      <input type="radio" name="radar" value="snow" id="snow" autocomplete="off"> Snow 
     </label> 
    </div> 
</div>