Hướng dẫn custom radio button và checkbox

Như các bạn cũng biết thì radio button hoặc checkbox thường được sử dụng nhiều trong form hoặc filter. Để render ra group radio button hoặc group check box thì dễ nhưng để custom lại cho đẹp hơn thì lại nhứt đầu với một số bạn mới tiếp cận với frontend thì với bài này mình sẽ hướng dẫn các bạn custom radio button và checkbox.

Lên khung Html và css Style lại giao diện 

Trước tiên mình sẽ lấy ví dụ thông qua việc lên khung html mình sẽ show một số hạng giày như sau:

<div class="product__filter-item">
            <h1 class="title--item"> Hãng</h1>
            <div class="filter__form-item">
              <input type="radio" id="productBand0" name="productBand" value="all-brand" checked="">
              <label class="productBand active" for="productBand0">Tất cả</label>
            </div>
            <div class="filter__form-item">
            <input type="radio" id="productBand1" name="productBand" value="adidas">
            <label class="productBand" for="productBand1">Adidas</label>
          </div><div class="filter__form-item">
            <input type="radio" id="productBand2" name="productBand" value="converse">
            <label class="productBand" for="productBand2">Converse</label>
          </div><div class="filter__form-item">
            <input type="radio" id="productBand3" name="productBand" value="mlb">
            <label class="productBand" for="productBand3">MLB</label>
          </div><div class="filter__form-item">
            <input type="radio" id="productBand4" name="productBand" value="nike">
            <label class="productBand" for="productBand4">Nike</label>
          </div><div class="filter__form-item">
            <input type="radio" id="productBand5" name="productBand" value="san-pham-khac">
            <label class="productBand" for="productBand5">Sản Phẩm Khác</label>
          </div>          
   </div>

Ở đây là khung html render một số trường sản phẩm có sãn trong database của web. Thì như các bạn cũng biết thì đây là kết quả trả về

Hiện tại chỉ với html không thì giao diện render là radio button mặc định của trình duyệt. Lúc này mình sẽ thêm css vào để giao diện được đẹp hơn.

.product__filter-item .title--item {
  color: #ff4545;
  font-size: 17px;
}
.product__filter-item .filter__form-item input {
  display: none;
}
.product__filter-item .filter__form-item label {
  display: block;
  padding: 5px 10px;
  background: var(--primary-bg-color);
  margin: 8px;
  color: #fff;
  border-radius: 20px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.25s linear;
}
.product__filter-item .filter__form-item label.active {
  background: #ff4545;
}
.product__filter-item .filter__form-item label:hover {
  background: #ff4545;
}

Ở đây mình cho các radio button được dàn ngang và nó sẽ ở dạng thẻ tag. 

Vậy là mình đã hướng dẫn xong các bạn  custom lại giao diện thông qua css. Tiếp theo chúng ta sẽ custom sự kiện kih click vào radio button nào thì thằng đó sẽ chuyển theo màu đỏ khi được active.

Tùy biến lại với JavaScript

 Điều cần làm kế tiếp là mình sẽ DOM tới các radio button đó ( Xem nhiều hơn tại: https://wolfactive.dev )

var productBrandFilter = document.querySelectorAll('input[name="productBand"]');
var productBrandFilterLabel = document.querySelectorAll('.productBand');

Ở đây mình DOM hết các input radio button có name là productBand và các label của radio button ấy. Thì giá trị trả về của 2 biến này là 2 array. Tiếp theo mình sẽ bắt sự kiện sao cho khi nhấn radio button nào thì label đó sẽ được thêm class active. Nếu các bạn đọc lại đoạn code css ở trên. Thì các bạn sẽ thấy khi label có class active thì background của label sẽ là màu đỏ. Và chử trên label đó là màu trắng. Mình sẽ làm như sau:

function actionFilter(arrayFilter,arrayLabel) {
  arrayFilter.forEach(function (item, i) {
    item.onclick = function () {
      arrayLabel.forEach(function (item) {
        item.classList.remove('active');
      });
      arrayLabel[i].classList.add('active');
    };
  });
}

Ở đây mình tạo một function actionFilter(). Trong hàm này mình dùng forEach để truy suất đến từng phần tử trong array productBrandFilter. Thì khi mà từng phần tử trong đó click thì Label tương ứng sẽ được thêm class active. bắt cách gọi lệnh đó ra.

productBrandFilter ? actionFilter(productBrandFilter,productBrandFilterLabel):{};

Minh bắt điều kiện ở đây kiểm tra xem có productBrandFilter thì mới thực hiện lệnh. Để tránh báo lỗi trên console khi không có thành đó trên html. Vậy là mình và các bạn đã làm xong phần custom radio button rồi. Còn lại phần check box cũng như vậy chỉ khác là các bạn sẽ chỉnh lại hàm actionFilter như sau

function actionFilter(arrayFilter,arrayLabel) {
  arrayFilter.forEach(function (item, i) {
    item.onclick = function () {
      arrayLabel[i].classList.toggle('active');
    };
  });
}

Hừm vậy là xong rồi, hi vọng với bài này các bạn có thể áp dụng trong việc lập trình frontend. Chúc các bạn thành công nhé. Mọi thắc mắc các bạn liên hệ fanpage tụi mình hoặc để lại comment + tên bài để tụi mình giải đáp nhé.