<label style=선택자><input 체크 버튼></label> 구조에서 스타일 지정?
본문
<label style=선택자><input 체크 버튼></label> 구조에서
input 체크박스에 체크가 되어있다면 label의 스타일 선택자를 aaa 불러오고
input 체크박스에 체크가 안 되었다면 label의 스타일 선택자를 bbb 불러오는 방법?
답변 4
<style>
.aaa {background:red; width:50px; height:30px;}
.bbb {background:blue; width:50px; height:30px;}
</style>
<label class="aaa" id="labelid"><input type="checkbox" id="ckid" name="ckname" onclick="javascript:scp_check()"></label>
<script>
function scp_check(){
var obj = document.getElementsByName("ckname")
var labelobj = document.getElementById("labelid");
if(obj[0].checked==true){
labelobj.className="bbb";
}else{
labelobj.className="aaa";
}
}
</script>
푸할할할 님 천재시네용. ^^ 아주 잘됩니다. 고맙습니다.
근데, obj[0] 이건 뭔가요? obj 배열의 첫 번째라는 의미는 아닌 것 같고.....
<label style=선택자 id="labelid"><input 체크 버튼 id="ckid" name="ckname"></label>
<script>
var obj = document.getElementsByName("ckname")
var labelobj = document.getElementById("labelid");
if(obj[0].checked==true){
labelobj.style="aaa"
}else{
labelobj.style="bbb";
}
</script>
답변 고맙습니다. 근데, 아래처럼 해봤는데, 잘 안 되네요.
<style>
label.aaa {background:red; width:50px; height:30px;}
label.bbb {background:blue; width:50px; height:30px;}
</style>
<label id="labelid" for="ckid"><input type="checkbox" id="ckid" name="ckname">체크</label>
<script>
var obj = document.getElementsByName("ckname")
var labelobj = document.getElementById("labelid");
if(obj[0].checked==true){
labelobj.style="aaa"
}else{
labelobj.style="bbb";
}
</script>
label.aaa {background:red; width:50px; height:30px;}
label.bbb {background:blue; width:50px; height:30px;}
이건뭔가요?? 이건 클래스를 준건가요?
클래스를 주실려면 이렇게 하면 안되죠..
labelobj.className = "aaa";
이렇게 하던가
style에서 직접 스타일을 주던가요..
labelobj.style="background:red; width:50px; height:30px;"
이렇게요.
http://codepen.io/anon/pen/zxzqQm 처럼 해줬는데도, 잘 적용이 안 되네요.
체크 하면 빨간색, 체크 안 하면 파란색 나타나게 하려면 어떻게 수정해야 할까요?
ps.
obj[0] ← 이건 무슨 의미인지? 숫자 0이 뭘 의미하는지 잘 모르겠습니다.
obj[0] 배열 맞습니다. name 로 받은 obj값은 배열로 들어옵니다. 그래서 name 값은 한페이지에 여러개가 올수가있습니다. 지금은 하나밖에 없으니 obj[0] 인겁니다.
그럼, 혹시, 아래 소스를 약간 수정해 obj[2]가 오는 예제 하나 부탁드려도 될까요?
name이 여러 개 올 수 있다셨는데, 어떤 경우에 그런 게 가능한지 궁금합니다.
<style>
.aaa {background:red; width:50px; height:30px;}
.bbb {background:blue; width:50px; height:30px;}
</style>
<label class="aaa" id="labelid"><input type="checkbox" id="ckid" name="ckname" onclick="javascript:scp_check()"></label>
<script>
function scp_check(){
var obj = document.getElementsByName("ckname")
var labelobj = document.getElementById("labelid");
if(obj[0].checked==true){
labelobj.className="bbb";
}else{
labelobj.className="aaa";
}
}
</script>
