WIZKID WIZKID - 7 months ago 31
Javascript Question

Bootstrap/JQuery - Radio Button Group Event Functions

My goal is to run a function depending upon what radio button in a group is selected. Using other posts I was able to implement the bellow scripts. Here are the errors I am encountering:
1) The initial button that I declare to be checked by default does not call a function. If I remove the checked attribute from the button it functions as the others do.
2) Each button works only once. For example if I click button two, it fires the appropriate function. Then when button 3 is clicked, it too functions successfully. The problem is when I then try to go back to button 2. It will not fire a 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 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

You should give the same name to all your inputs like 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>
Comments