Кнопочный тумблер на jQuery и Bootstrap

Кнопочный тумблер с использованием jQuery и Bootsrap вместо стандартного чекбокса



Live demo

Дальше исходный код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

  <div class="btn-group btn-group-checkbox" data-active-class="btn-info" data-target="sex">
    <button type="button" class="btn btn-small" data-checked="0">Man</button>
    <button type="button" class="btn btn-small" data-checked="1">Woman</button>
  </div>

  <input style="display: none"  type="checkbox" value="1" id="sex">
 
 
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    $('.btn-group-checkbox').each(function() {
        var active_class=$(this).attr('data-active-class');
        var target=$('#' + $(this).attr('data-target'));
        var _this = this;
        $(_this).find('button').removeClass('active').removeClass(active_class);
        var v = target.attr('checked')? 1: 0;
        $(_this).find('button').each(function () {
            if($(this).attr('data-checked')==v) {
                $(this).addClass('active').addClass(active_class);
            }
        })

        $(this).find('button').on("click", function() {
            $(_this).find('button').removeClass('active').removeClass(active_class);
            $(this).addClass('active').addClass(active_class);
            target.attr('checked', ($(this).attr('data-checked')==1));
            eval(target.attr('onclick'));
        })

    })

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *