한개씩 채워지는 별점 html css javascript

 

<div class="starlist rating">
    <ul>
      <li>
        <div class="checkbox">
          <input type="checkbox" name="star_box" value="1" id="star" hidden="" class="rate_radio">
          <label for="star">
          </label>
        </div>
      </li>
      <li>
        <div class="checkbox">
          <input type="checkbox" name="star_box" value="2" id="star02" class="rate_radio" hidden="">
          <label for="star02">
          </label>
        </div>
      </li>
      <li>
        <div class="checkbox">
          <input type="checkbox" name="star_box" value="3" id="star03" class="rate_radio" hidden="">
          <label for="star03">
          </label>
        </div>
      </li>
      <li>
        <div class="checkbox">
          <input type="checkbox" name="star_box" value="4" id="star04" class="rate_radio" hidden="">
          <label for="star04">
          </label>
        </div>
      </li>
      <li>
        <div class="checkbox">
          <input type="checkbox" name="star_box" value="5" id="star05" hidden="" class="rate_radio">
          <label for="star05">
          </label>
        </div>
      </li>
    </ul>
  </div>

.starlist{text-align: center; margin: 0 auto;padding: 15px 0;}
.starlist ul{margin: 0;}
.starlist ul li{ display: inline-block; width: 33px;height: 33px;}
.starlist ul li img{width: 33px;}
.checkbox{margin:0;width:100%;height:100%}
.checkbox::after{display:block;clear:both;content:''}
.checkbox label{display:block;position:absolute;width:33px;height:33px;padding:0;margin:0; border-radius: 8px;}
.checkbox label {background:url(image/sub/star_gray.png) no-repeat center;background-size: 33px;}
.checkbox input:checked+label {background:url(image/sub/star.png)no-repeat center; background-size: 33px;}

	//별점 마킹 모듈 프로토타입으로 생성
	function Rating() {};
	Rating.prototype.rate = 0;
	Rating.prototype.setRate = function(newrate) {
		//별점 마킹 - 클릭한 별 이하 모든 별 체크 처리
		this.rate = newrate;
		let items = document.querySelectorAll('.rate_radio');
		items.forEach(function(item, idx) {
			if (idx < newrate) {
				item.checked = true;
			} else {
				item.checked = false;
			}
		});
	}
	let rating = new Rating(); //별점 인스턴스 생성

	document.addEventListener('DOMContentLoaded', function() {
		//별점선택 이벤트 리스너
		document.querySelector('.rating').addEventListener('click', function(e) {
			let elem = e.target;
			if (elem.classList.contains('rate_radio')) {
				rating.setRate(parseInt(elem.value));
			}
		})
	});