Question

我的目标是根据选择组中的单选按钮来运行功能。使用其他帖子我能够实现波纹管脚本。以下是我遇到的错误： 1）我声明要默认选中的初始按钮不会调用函数。如果我从按钮中删除checked属性，它将像其他人一样工作。 2）每个按钮只能工作一次。例如，如果我单击按钮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>

Bootstrap / JQuery - 单选按钮组事件功能

1 个答案: