javascript - Bootstrap/JQuery - Radio Button Group Event Functions -

my goal run function depending upon radio button in group selected. using other posts able implement bellow scripts. here errors encountering: 1) initial button declare checked default not call function. if remove checked attribute button functions others do. 2) each button works once. example if click button two, fires appropriate function. when button 3 clicked, functions successfully. problem when try go button 2. not fire second time.

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 clicked input button             //do stuff...             break;         case "precip":             console.log(this.value); // points clicked input button             //do stuff...             break;         case "snow":             console.log(this.value); // points 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> 

you should give same name inputs this

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