Thay đổi ngoại hình radio button với Bootstrap 3

03/08/2017

Nếu các bạn cảm thấy quá nhàm chán với những mẫu radio button mặc định, thì bài viết mà mình chia sẻ cho các bạn ngày hôm nay sẽ đáng để các bạn tham khảo. Trong bài viết này, chúng ta sẽ học cách sử dụng các phần tử html khác với sự hỗ trợ của Bootstrap, để lấy thông tin từ người dùng mà không cần phải sử dụng đến bất kì phần tử radio button nào.

Thay đổi ngoại hình radio button với Bootstrap 3

Xem Demo | Download

HTML

Như thường lệ, chúng ta sẽ chèn những thư viện cần thiết vào bên trong thẻ head.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>

Để tạo thông tin giống radio button chúng ta sẽ sử dụng cấu trúc html như sau :

<div class="form-group">
        <label for="happy" class="col-sm-4 col-md-4 control-label text-right">Are you happy ?</label>
        <div class="col-sm-7 col-md-7">
          <div class="input-group">
            <div id="radioBtn" class="btn-group">
              <a class="btn btn-primary btn-sm active" data-toggle="happy" data-title="Y">YES</a>
              <a class="btn btn-primary btn-sm notActive" data-toggle="happy" data-title="N">NO</a>
            </div>
            <input type="hidden" name="happy" id="happy">
          </div>
</div>

Các bạn để ý trong đoạn form bên trên, có một phần tử là thẻ input với type=”hidden” , chúng ta sẽ dùng thẻ này để lấy giá trị từ người dùng.

CSS

Các bạn chỉ cần đoạn css ngắn bên dưới dành cho những nút không được chọn.

 #radioBtn .notActive{
    color: #3276b1;
    background-color: #fff;
}

jQuery

Và đoạn script bên dưới sẽ giúp chúng ta chuyển sự lựa chọn qua lại và lấy thông tin từ lựa chọn gán vào bên trong thẻ hidden.

<script type="text/javascript">
 
$('#radioBtn a').on('click', function(){
    var sel = $(this).data('title');
    var tog = $(this).data('toggle');
    $('#'+tog).prop('value', sel);
    
    $('a[data-toggle="'+tog+'"]').not('[data-title="'+sel+'"]').removeClass('active').addClass('notActive');
    $('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})
 
  </script>
 

Hy vọng các bạn sẽ tìm thấy được sự hữu ích khi sử dụng mẫu radio button này.

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !