비밀글 체크박스에 체크하면, A라는 문자열이 B 문자열로 바뀌게?
관련링크
본문
자바스크립트 조건문 코드를 이용하는 걸로 아는데,
자바스크립트 이제 입문해서 응용을 못하고 있네요. ㅡㅡ;
예를 들어, 비밀글 체크박스에 체크를 하는 순간,
<div name='sample'>고수 님 부탁해요</div> 가
<div name='sample'>고수 님 사랑해요</div> 로 바뀌는 식으로 말이죠.
위 두 조건문 사항을 어떻게 표현해야 할까요?
[참고] 비밀글 체크박스 관련 소스
<? if ($is_secret) { ?>
<? if ($is_admin || $is_secret==1) { ?>
<input type=checkbox value="secret" id="wr_secret" name="secret" <?=$secret_checked?>>
<label for="wr_secret">비밀글</label>
<? } else { ?>
<input type=hidden value="secret" name="secret">
<? } ?>
<? } ?>
<div name='sample'>고수 님 부탁해요</div>
답변 2
<script type="text/javascript">
function chkText(f){
if(f.checked)
document.getElementById('title').innerText = "고수 님 사랑해요";
else
document.getElementById('title').innerText = "고수 님 부탁해요";
}
</script>
<input type=checkbox value="secret" id="wr_secret" name="secret" onclick="chkText(this)" >
<div id="title" class='sample'>고수 님 부탁해요</div>
참고하시면 될 듯 합니다.
정말 감사합니다. ^^ 덕분에 궁금증이 확 해결됐습니다. 좋은 하루 되세요.
<meta charset="utf-8" />
<div name="sample">고수님 부탁해요</div>
<input type="checkbox" name="secret" id="wr_secret" value="secret">
<script type="text/javascript">
document.getElementById("wr_secret").onclick = function() {
var oStr = "고수님 부탁해요";
var oStr = this.checked == true ? "고수님 사랑해요" : "고수님 부탁해요";
document.getElementsByName("sample")[0].innerHTML = oStr;
}
</script>
jquery 사용하시면 더 편하게 가능할 겁니다.
이미 채택된 거라고 해서 수정이 안 되네요.
붙여넣기 하다 보니 oStr 변수 하나가 더 들어갔네요. <-- 삭제
그리고 ie9 이하에서는 name으로 했을 경우에 document.getElementsByName("sample")[0] 이런 식으로 접근을 하려고 하면 null로 뜹니다.
typeof로 찍어 보면 undefined라고 나오네요.
이렇게 한 개일 땐 name보단 id로 접근하는 게 크로스브라우징 면에서도 더 편할 겁니다.
왕계란 님, 자세한 설명 고맙습니다.
근데, 역시 초보라.....응용에서 한계에 부딪히네요.
배추베이직 게시판 스킨에서 비밀글일 경우 질문포인트를 특정 포인트로 조정하려면 하는데,
포인트 값이 PHP코드랑 연계가 되니까...또 그게 어려워지네요.
배추베이직 게시판 스킨 제작자 님이 기능 넣어 배포해주신다고 했는데,
그새 4개월이 훌쩍 지나가버려서 공부도 할겸 스스로 구현해 보려고 하는데....
※ 비밀글 체크 박스
<input type=checkbox value="secret" id="wr_secret" name="secret" <?=$secret_checked?>>
※ 질문자가 질문포인트 기입하는 입력 박스
<input type="text" size="5" class="ed" name="wr_qna_point" required numeric value="<?=$write[wr_qna_point]?>" itemname="질문 포인트"
<? if (!$is_admin && $w == 'u') echo "disabled"; ?>> 포인트
아래처럼 변경해봤는데, 안 되네요.
물론, 질문포인트 input 입력 부분에 id='wr_qna_point 코드 추가해 넣었습니다.
<script type="text/javascript">
document.getElementById("wr_secret").onclick = function() {
var qnapoint = this.checked == true ? "500" : "<?=$write[wr_qna_point]?>";
document.getElementsById("wr_qna_point")[0].innerHTML = qnapoint;
}
</script>
input일 경우엔 innerHTML이 아니라 value로 써야 합니다.
document.getElementsById("wr_qna_point")[0].value = qnapoint;
그래도 안 되네요.어디가 잘 못 된건지 알 수 있을까요? 현재 상태입니다.
<? if ($is_secret) { ?>
<? if ($is_admin || $is_secret==1) { ?>
<input type=checkbox value="secret" id="wr_secret" name="secret" <?=$secret_checked?>>
<label for="wr_secret">비밀글</label>
<? } else { ?>
<input type=hidden value="secret" name="secret">
<? } ?>
<? } ?>
<input type="text" size="5" class="ed" name="wr_qna_point" required numeric value="<?=$write[wr_qna_point]?>" itemname="질문 포인트"
<? if (!$is_admin && $w == 'u') echo "disabled"; ?> id='wr_qna_point'> 포인트.
<script type="text/javascript">
document.getElementById("wr_secret").onclick = function() {
var qnapoint = this.checked == true ? "500" : <?=$write[wr_qna_point]?>;
document.getElementsById("wr_qna_point")[0].value = qnapoint;
}
</script>
document.getElementsById("wr_qna_point")[0].value = qnapoint;
id는 단수로 취급합니다.
name일 경우엔 복수구요.
document.getElementById("wr_qna_point).value = qnapoint;
단수로 변경해줘도 마찬가지네요.
http://codepen.io/anon/pen/ZQGVNJ?editors=100
지금 주신 링크에 보면
document.getElementById("sample")[0].value = oStr;
이렇게 되어 있습니다.
document.getElementById("sample").value = oStr;
뒤에 [0] 이걸 빼야 합니다.
빼니까 잘 되네요. 감사합니다. ^^
왕계란 님, 체크가 되었을 때, 고수님 사랑해요 값이 들어가잖아요.
이 경우, 유저가 다른 값으로 변경 못 하게 하려면 어떻게 해야 할까요?
해당 input에 readonly를 주면 되겠지요.
<input type="text" name="wr_qna_point" readonly
감사합니다. ^&^
아, 그 속성.....깜빡했네요. 근데, 그 속성을 체크박스가 체크되어있을 경우에만 작동하도록
아래처럼 해봤는데, 작동이 안 되네요. 뭐가 잘 못 된걸까요?
http://codepen.io/anon/pen/ZQGVNJ?editors=100
방금 원인을 찾아 해결했네요. input에 제가 속성을 안 적어 넣었네요. ㅎ
해결한 줄 알았더니, 아니네요.^^;;; 체크했을 때나 아닐 때나 readonly가 먹혀버리네요.
http://codepen.io/anon/pen/ZQGVNJ?editors=100
document.getElementById("wr_secret").onclick = function() {
var oStr = this.checked == true ? "고수님 사랑해요" : "";
var read = this.checked == true ? true : false;
document.getElementById("sample").value = oStr;
document.getElementById("sample").readOnly = read;
}
왕계란 님, 사랑합니다. ^^
