테스트 사이트 - 개발 중인 베타 버전입니다

<label style=선택자><input 체크 버튼></label> 구조에서 스타일 지정? 채택완료

홈짱 10년 전 조회 5,727

<label style=선택자><input 체크 버튼></label> 구조에서 

 

input 체크박스에 체크가 되어있다면 label의 스타일 선택자를 aaa 불러오고

input 체크박스에 체크가 안 되었다면 label의 스타일 선택자를 bbb 불러오는 방법? 

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
10년 전

<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> 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

홈짱
10년 전
푸할할할 님 천재시네용. ^^ 아주 잘됩니다. 고맙습니다.

근데, obj[0] 이건 뭔가요? obj 배열의 첫 번째라는 의미는 아닌 것 같고.....

댓글을 작성하려면 로그인이 필요합니다.

10년 전

 obj[0] 배열 맞습니다. name 로 받은 obj값은 배열로 들어옵니다. 그래서 name 값은 한페이지에 여러개가 올수가있습니다. 지금은 하나밖에 없으니 obj[0]​ 인겁니다.

 

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

홈짱
10년 전
그럼, 혹시, 아래 소스를 약간 수정해 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>

댓글을 작성하려면 로그인이 필요합니다.

10년 전

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;"​ 

이렇게요.

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

홈짱
10년 전
http://codepen.io/anon/pen/zxzqQm 처럼 해줬는데도, 잘 적용이 안 되네요.
체크 하면 빨간색, 체크 안 하면 파란색 나타나게 하려면 어떻게 수정해야 할까요?


ps.
obj[0] ← 이건 무슨 의미인지? 숫자 0이 뭘 의미하는지 잘 모르겠습니다.

댓글을 작성하려면 로그인이 필요합니다.

10년 전

<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>

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

홈짱
10년 전
답변 고맙습니다. 근데, 아래처럼 해봤는데, 잘 안 되네요.

<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>

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인