비밀글 체크박스에 체크하면, 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>
※ 참고 링크 http://codepen.io/anon/pen/pgJQqM" target="_self" style="font-size: 11pt; line-height: 1.5;">http://codepen.io/anon/pen/pgJQqM
답변 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>
참고하시면 될 듯 합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
</p><p><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></p><p>jquery 사용하시면 더 편하게 가능할 겁니다.
http://nyaongii.dothome.co.kr/temp/wrid_100818.html">http://nyaongii.dothome.co.kr/temp/wrid_100818.html
답변에 대한 댓글 14개
붙여넣기 하다 보니 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>
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>
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 type="text" name="wr_qna_point" readonly
아, 그 속성.....깜빡했네요. 근데, 그 속성을 체크박스가 체크되어있을 경우에만 작동하도록
아래처럼 해봤는데, 작동이 안 되네요. 뭐가 잘 못 된걸까요?
http://codepen.io/anon/pen/ZQGVNJ?editors=100
방금 원인을 찾아 해결했네요. input에 제가 속성을 안 적어 넣었네요. ㅎ
http://codepen.io/anon/pen/ZQGVNJ?editors=100
var oStr = this.checked == true ? "고수님 사랑해요" : "";
var read = this.checked == true ? true : false;
document.getElementById("sample").value = oStr;
document.getElementById("sample").readOnly = read;
}
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인