예약 게시판 관련 질문 드립니다.
본문
안녕하세요
우선 답변 주시는 모든 분들께 먼저 감사 드립니다.
http://yst.jmtech5.com/bbs/write.php?bo_table=board8&select=2019-03-08&office_no=1
현제 마시멜로에 체크를 하고 나서 아래 시간을 선택을 하면 체크가 되어야 하는데 체크가 되지 않는 현상입니다.
여러 고수님들의 답변 부탁 드립니다.
감사합니다.
그런데 회의실 같은 경우에는 체크가 잘 되고요 혹시 외 그러는 것인지 궁금 합니다.
그리고 체크 박스에 대한 스타일은 아래와 같습니다.
@-moz-keyframes borderscale {
50% { box-shadow: 0 0 0 2px #999; }
}
@-webkit-keyframes borderscale {
50% { box-shadow: 0 0 0 2px #999; }
}
@keyframes borderscale {
50% { box-shadow: 0 0 0 2px #999; }
}
input[type="checkbox"],
input[type="radio"]{ border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
input[type="checkbox"]:hover + label:before,
input[type="radio"]:hover + label:before { border-color: #00bad2; }
input[type="checkbox"]:active + label:before,
input[type="radio"]:active + label:before { transition-duration: 0; filter: brightness(0.2); }
input[type="checkbox"] + label,
input[type="radio"] + label { position: relative; padding-left: 26px; font-weight: normal; cursor:pointer; }
input[type="checkbox"] + .empty-label,
input[type="radio"] + .empty-label { position: relative; padding-left:0; font-weight: normal; cursor:pointer; width:20px; }
input[type="checkbox"] + label:before,
input[type="checkbox"] + label:after,
input[type="radio"] + label:before,
input[type="radio"] + label:after { box-sizing: content-box; position: absolute; content: ''; display: block; left: 0; }
input[type="checkbox"] + label:before,
input[type="radio"] + label:before { top: 50%; width: 16px; height: 16px; margin-top: -10px; border: 2px solid #d9d9d9; text-align: center; cursor:pointer; }
input[type="checkbox"] + label:after,
input[type="radio"] + label:after { background-color: #00bad2; top: 50%; left: 6px; width: 8px; height: 8px; margin-top: -4px; transform: scale(0); transform-origin: 50%; transition: transform 200ms ease-out; cursor:pointer; }
input[type="radio"]:checked + label:before { background-color: #fff; border-color: #00bad2; }
input[type="radio"]:checked + label:after { transform: scale(1); }
input[type="radio"] + label:before, input[type="radio"] + label:after { border-radius: 50%; }
input[type="checkbox"] + label:after { background-color: transparent; top: 50%; left: 5px; width: 7px; height: 4px; margin-top: -5px; border-style: solid; border-color: #00bad2; border-width: 0 0 3px 3px; -moz-transform: rotate(-45deg) scale(0); -ms-transform: rotate(-45deg) scale(0); -webkit-transform: rotate(-45deg) scale(0); transform: rotate(-45deg) scale(0); -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; }
input[type="checkbox"]:checked + label:before { border-color: #00bad2; }
input[type="checkbox"]:checked + label:after { content: ''; -moz-transform: rotate(-45deg) scale(1); -ms-transform: rotate(-45deg) scale(1); -webkit-transform: rotate(-45deg) scale(1); transform: rotate(-45deg) scale(1); -moz-transition: -moz-transform 200ms ease-out; -o-transition: -o-transform 200ms ease-out; -webkit-transition: -webkit-transform 200ms ease-out; transition: transform 200ms ease-out; }
/* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance, IE 9 and earlier get a native select - targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
select::-ms-expand { display: none; }
select:focus::-ms-value { background: transparent; color: grey; }
}
아래 소스는 예약시간 소스구요
<tr>
<th>예약시간</th>
<td class="time_bg" colspan="3">
<?php if($time_person > 0) { //시간대별 예약인원 제한일경우.. ?>
<div style="height:auto;padding:15px 0px;line-height:160%">
※ 예약 시간대별 최대 예약가능한 인원은 <span style="color:red;"><?php echo $time_person;?></span>명입니다.<br/>
※ 예약시간 옆 괄호안의 숫자는 현재 예약 수 입니다.<br/>
※ 이용을 하고자 하는 시간대를 모두 선택하시면 됩니다.
</div>
<?php } ?>
<div id="admin_kk" style="display:none;">여러모로 회의실<br>
<?php
$am = booking_time($bo_table, $select); // 예약가능한시간대별리스트
echo check_time($am, $am, $write['wr_2'], 'time[]', 'time');
?>
</div>
<div id="admin_kk1" style="display:none;">마시멜로 직찍<br>
<?php
$am = booking_time($bo_table, $select); // 예약가능한시간대별리스트
echo check_time_1($am, $am, $write['wr_2'], 'time[]', 'time');
?>
</div>
</td>
</tr>
<script>
function c_bo(){
var chk = document.getElementsByName("jobs[]"); // 체크박스객체를 담는다
var len = chk.length; //체크박스의 전체 개수
var checkRow = ''; //체크된 체크박스의 value를 담기위한 변수
var checkCnt = 0; //체크된 체크박스의 개수
var checkLast = ''; //체크된 체크박스 중 마지막 체크박스의 인덱스를 담기위한 변수
var rowid = ''; //체크된 체크박스의 모든 value 값을 담는다
var cnt = 0;
for(var i=0; i<len; i++){
if(chk[i].checked == true){
checkCnt++; //체크된 체크박스의 개수
checkLast = i; //체크된 체크박스의 인덱스
}
}
if(checkCnt>1){
document.getElementById("admin_kk").style.display="";
document.getElementById("admin_kk1").style.display="";
}
else{
if(checkLast==0){
document.getElementById("admin_kk").style.display="";
document.getElementById("admin_kk1").style.display="none";
}
else{
document.getElementById("admin_kk").style.display="none";
document.getElementById("admin_kk1").style.display="";
}
// alert(checkLast);
}
/*
for(var i=0; i<len; i++){
if(chk[i].checked == true){ //체크가 되어있는 값 구분
checkRow = chk[i].value;
if(checkCnt == 1){ //체크된 체크박스의 개수가 한 개 일때,
rowid += "'"+checkRow+"'"; //'value'의 형태 (뒤에 ,(콤마)가 붙지않게)
}else{ //체크된 체크박스의 개수가 여러 개 일때,
rowid += "'"+checkRow+"',"; //'value',의 형태 (뒤에 ,(콤마)가 붙게)
}
}
cnt++;
checkRow = ''; //checkRow초기화.
}
*/
}
</script>
답변 2
이미 밑에 다른 분이 정답을 남기셨습니다.
해당 페이지 소스 보기를 했을 때 나오는 코드입니다.
유일무이해야 할 id가 두 개씩 있는 게 보이시죠?
저걸 수정하셔야 합니다. 옆에 label도 마찬가지구요.
밑의 글에도 답변자분꼐서 써주셨는데 똑같은 질문하셔봐야 똑같은 답입니다.
아이디는 고유값이라 중복되면 동작이 되지 않거나 제대로 동작하지 않습니다.
아이디 중복문제를 해결하시면 됩니다
wr_2 이거 말씀 하시는 것인지요
div id는 다르게 되어 있구요
답변을 작성하시기 전에 로그인 해주세요.
