Bootstrap/JQuery - функция события группы радиостанций

Question

Моя цель - запустить функцию в зависимости от того, какой переключатель в группе выбран. Используя другие сообщения, я смог реализовать скрипты ниже. Вот ошибки, с которыми я сталкиваюсь: 1) Начальная кнопка, которую я объявляю проверкой по умолчанию, не вызывает функцию. Если я удаляю проверенный атрибут с кнопки, он функционирует так же, как другие. 2) Каждая кнопка работает только один раз. Например, если я нажму кнопку два, он запускает соответствующую функцию. Затем, когда нажата кнопка 3, она также функционирует успешно. Проблема в том, что когда я пытаюсь вернуться к кнопке 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; 
    } 
}); 

КНОПКА-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>