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>