별점 기능 구현

<style>

/* 별점구현========================= */
#star{
display: inline-block;
direction: rtl;
border:0;
}
#star legend{
text-align: right;
}
input[type=radio]{
display: none;
}
#star label{
font-size: 2em;
color: transparent;
text-shadow: 0 0 0 #f0f0f0;
}
#star label:hover{
text-shadow: 0 0 0 rgba(250, 208, 0, 0.99);
}
#star label:hover ~ label{
text-shadow: 0 0 0 rgba(250, 208, 0, 0.99);
}
#star input[type=radio]:checked ~ label{
text-shadow: 0 0 0 rgba(250, 208, 0, 0.99);
}
.disable {
background-color: darkgray;
}
</style>

 

 

 

 

 

<!-- =================================================================== -->
<div class="col-md-4 mb-3">
<span class="text-bold">제품 평가</span>
<fieldset id="star">

<input type="radio" name="star" value="5" id="rate1"><label
for="rate1" >★</label>
<input type="radio" name="star" value="4" id="rate2"><label
for="rate2" >★</label>
<input type="radio" name="star" value="3" id="rate3"><label
for="rate3" >★</label>
<input type="radio" name="star" value="2" id="rate4"><label
for="rate4" >★</label>
<input type="radio" name="star" value="1" id="rate5"><label
for="rate5" >★</label>
</fieldset>
</div>
<!-- =================================================================== -->

 

 

 

 

 

<script>
function sendData(){
let firstForm = document.forms[0];

if($("input[name='star']:checked").val() == undefined){
alert("별점 선택 필수입니다!");
return;
}

</script>