使用jquery实现BootstrapSwitch将复选框和单选按钮变成切换开关方法

html代码

<div class="form-group">
                                <label class="control-label col-md-2 col-sm-2 col-xs-12">是否需要物料</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <i style="font-size: 30px;color: #696969;" class="switchEarly fa fa-toggle-off"
                                       onclick="openModebtn('material')" id="mode_fa_material"></i>
                                    <input type="hidden" id="open_material" name="open_material" value="0">
                                </div>
                            </div>



 <div class="form-group">
                                <label class="control-label col-md-2 col-sm-2 col-xs-12">是否需要报名</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <i style="font-size: 30px;color: #696969;" class="switchEarly fa fa-toggle-off"
                                       onclick="openModebtn('enroll')" id="mode_fa_enroll"></i>
                                    <input type="hidden" id="open_enroll" name="open_enroll" value="0">
                                </div>
                            </div>

jquery代码

<script>

    //公用点击开启关闭按钮
    function openModebtn(modename) {
        var open_mode = $("#open_" + modename).val();
        if (open_mode == 1) {
            //关闭
            $("#mode_fa_" + modename).attr('class', 'switchEarly fa fa-toggle-off');
            $("#mode_fa_" + modename).attr('style', 'font-size: 30px;color: #696969;');
            $("#open_" + modename).val(0);
        } else {
            //开启
            $("#mode_fa_" + modename).attr('class', 'switchEarly fa fa-toggle-on');
            $("#mode_fa_" + modename).attr('style', 'font-size: 30px;color: #00FA9A;');
            $("#open_" + modename).val(1);
        }
    }

</script>

可以实现同一个js控制多个开关按钮

扩展传入this

html代码

<div class="form-group">
                                <label class="control-label col-md-2 col-sm-2 col-xs-12">支持分享</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <i style="font-size: 30px;color: #696969;" class="switchEarly fa fa-toggle-off"
                                       onclick="associatedModebtn(this)" data-id="is_share" id="share_mode_fa"></i>
                                    <input type="hidden" id="is_share" name="is_share" value="0">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-2 col-sm-2 col-xs-12">关联资源</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <i style="font-size: 30px;color: #696969;" class="switchEarly fa fa-toggle-off"
                                       onclick="associatedModebtn(this)" data-id="open_associated"
                                       id="open_associated_mode_fa"></i>
                                    <input type="hidden" id="open_associated" name="open_associated"
                                           value="0">
                                </div>
                            </div>

jquery 代码

 //点击开启关联商品按钮
    function associatedModebtn(that) {

        var id = that.id;

        var input_id = $("#" + id).attr('data-id');

        var input_value = $("#" + input_id).val();

        if (input_value == 1) {
            //关闭
            $("#" + id).attr('class', 'switchEarly fa fa-toggle-off');
            $("#" + id).attr('style', 'font-size: 30px;color: #696969;');

            $("#" + input_id).val(0);
      
        } else {
            //开启
            $("#" + id).attr('class', 'switchEarly fa fa-toggle-on');
            $("#" + id).attr('style', 'font-size: 30px;color: #00FA9A;');
            $("#" + input_id).val(1);
        }
    }