버튼 토글(라디오를 이용한)

준비물

 

HTML 

 

라디오에 라벨을 연결. (id="sameName")/(for="sameName")

<p>라디오를 이용한 버튼 토글</p>
<div>
  <input type="radio" name="min_btn" id="min30" value="1"><label for="min30">A</label>
  <input type="radio" name="min_btn" id="min60" value="2"><label for="min60">B</label>
  <input type="radio" name="min_btn" id="nomin" value="3"><label for="nomin">C</label>
</div>

결과 : 

---

CSS 

 

취향대로 꾸며 주기

div {
  display:flex;
  align-items: center;
}
p {
  margin-right: 20px;
}
input {
  display:none
}
label {
  margin-right: 10px; 
  color: #6c6c6c; 
  border: 1px solid #9c9c9c; 
  border-radius: 15px; 
  background-color: #fff; 
  height: 26px; 
  padding: 0 15px; 
  line-height: 27px;
  background-color: #fff;
}
.clicked_botton {
  border: 1px solid #1e3560;
  color: #1e3560;
  background-color: #1e3560;
  color: #fff;
}

결과 : 

---

jQuery 

 

 $(document).on("click", "input[name='min_btn']", function(){

    $('label').removeClass('clicked_botton')
 
    if ($(this).hasClass("Checked")) {
        $(this).removeClass("Checked");
        $(this).prop('checked', false);
        thisRadio.next('label').removeClass('clicked_botton')
    }else { 
        $(this).prop('checked', true);
        $(this).addClass("Checked");
        $(this).next('label').addClass('clicked_botton')
    };
    $(this).siblings().removeClass("Checked");
    
})

 

결과 : 

 

라디오 버튼 보이는 경우 : 

See the Pen Untitled by alinfanclub (@alinfanclub) on CodePen.

 

결과 : 

 

라디오 버튼이 안 보이는 경우 

See the Pen Untitled by alinfanclub (@alinfanclub) on CodePen.

 

 

 

 

출처 : https://sir.kr/g5_tip/12441