답변 3개 / 댓글 3개
채택된 답변
+20 포인트
라디오 버튼(중복선택 불가)을 쓰고
css 로 스타일링 하는 방식을 많이 사용합니다. https://jsfiddle.net/markheath/azk2cL45/1/
ID 는 하나의 페이지에서 유니크해야 됩니다. 그래서 같은 name 을 가지는 라디오 버튼도 id 는 모두 달라야 합니다. https://choseongho93.tistory.com/60
id 이름으로 뭔가 처리하는 스크립트 코드가 있다면.. 해당 스크립트 코드를 수정해야 됩니다. http://www.kkujunhee.net/bbs/board.php?bo_table=source&wr_id=40&device=pc
ex. $('#bet_point') -> $('.bet_point')
Copy
<div class="radio-toolbar">
<input type="radio" name="g1" id="bet_point_100" class="bet_point" value="100">
<label for="bet_point_100">100</label>
<input type="radio" name="g1" id="bet_point_200" class="bet_point" value="200">
<label for="bet_point_200">200</label>
<input type="radio" name="g1" id="bet_point_300" class="bet_point" value="300">
<label for="bet_point_300">300</label>
</div>
<style type="text/css">
.radio-toolbar {
margin: 10px;
}
.radio-toolbar input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.radio-toolbar label {
display: inline-block;
background-color: #fff;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.radio-toolbar label:hover {
background-color: #dfd;
}
.radio-toolbar input[type="radio"]:checked + label {
background-color: #bfb;
border-color: #f00;
}
</style>
Copy
<input type="radio" name="chk_info" value="100">100
<input type="radio" name="chk_info" value="200">200
<input type="radio" name="chk_info" value="300">300답변을 작성하려면 로그인이 필요합니다.