将事件处理程序添加到按钮,该按钮是无线电转换的滑块

时间:2018-04-12 02:24:06

标签: javascript jquery radio-button slider

我使用了无线电到滑块插件将一组单选按钮转换为滑块。这是我在这里使用的插件来创建此功能http://rubentd.com/radios-to-slider/。这个插件就像一个魅力。我有兴趣知道我应该使用哪个事件处理程序将函数加载到无线电转换滑块按钮。我也尝试使用onclick()onslide()onmouseover()。但是在加载函数时几乎没有运气。您能否建议我可以使用哪个事件处理程序将功能加载到单选按钮。

以前的版本:

当我使用下面的代码集

调用函数时,

onchange()事件运行良好

<div class="w3-display-container col-md-12 col-sm-10 col-xs-8" style="position:relative;top:1px;bottom:0;">
                            <div class="row">
                                <div class="btn-group btn-group-justified" data-toggle="buttons">
                                    <label class="btn btn-default">
                                        <input type="radio" name="options" id="option1" autocomplete="off" onchange="dataSegment(0)" checked>
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio" name="options" id="option2" autocomplete="off" onchange="dataSegment(1)">
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio" name="options" id="option3" autocomplete="off" onchange="dataSegment(2)">
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio" name="options" id="option4" autocomplete="off" onchange="dataSegment(3)">
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio" name="options" id="option5" autocomplete="off" onchange="dataSegment(4)">
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio" name="options" id="option6" autocomplete="off" onchange="dataSegment(5)">
                                    </label>

    </div></div></div>

Current code

<div id="radios">
                        <!--<input id="option1" name="options" type="radio">
                        <label for="option1">00:00:00 <br>secs</label>-->
                        <label for="option1">
                        <input id="option1"  name="options" type="radio" autocomplete="off" onchange="dataSegment(0)">
                        </label>

                        <label for="option2">
                        <input id="option2"  name="options" type="radio" autocomplete="off" onchange="dataSegment(1)">
                        </label>

                        <label for="option3">
                        <input id="option3" name="options" type="radio" autocomplete="off" onchange="dataSegment(2)">
                        <label for="option3"></label>

                        <label for="option4">
                        <input id="option4"  name="options" type="radio" autocomplete="off" onchange="dataSegment(3)">
                        </label>
</div>

我可以在此处将数据段功能加载到我的无线电转换滑块中进行哪些更改?

1 个答案:

答案 0 :(得分:0)

如果单选按钮在插件的使用功能后呈现,请尝试使用on而不是传统方式。例如

$(document).on('change','your-radio-class',function(){
    //Your code here
})