라디오박스나 체크 박스 식으로 ID는 동일한것 소스 채택완료
설명이 좀 에매하네요.. 그림으로 넣었어요
아래 그림처럼 빨간 박스에 숫자 100 ~30 까지 있는데요
한개의 빨간박스 선택시 그전에 선택된 박스는 해제되고 선택한 박스가 선택되게 하고 싶어요
100 클릭시 100선택
200 클릭시 200이 선택되면서 그전에 선택한 100은 선택 해제
어디서 부터 건드려야 할까요
https://kin-phinf.pstatic.net/20210409_151/16179458184507RxkE_PNG/ice_screenshot_20210409-142140.png?type=w750" width="620" />
답변 3개
라디오 버튼(중복선택 불가)을 쓰고
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')
</p>
<p><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></p>
<p> </p>
<p><style type="text/css">
.radio-toolbar {
margin: 10px;
}</p>
<p>.radio-toolbar input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}</p>
<p>.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;
}</p>
<p>.radio-toolbar label:hover {
background-color: #dfd;
}</p>
<p>
.radio-toolbar input[type="radio"]:checked + label {
background-color: #bfb;
border-color: #f00;
}</p>
<p>
</style></p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
하면 되지 않나요? 선택된걸 border 효과 주고싶다는 건가요?
id는 한페이지에 하나만 있어야 합니다. 동일한걸 사용하면 안됩니다.
https://developer.mozilla.org/ko/docs/Web/CSS/:checked
참고하세요.
댓글을 작성하려면 로그인이 필요합니다.
</p>
<p><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</p>
<p>답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인