체크박스에서 체크시 색상변경해보기.

DHTML/Javascript

체크박스에서 체크시 색상변경해보기.

박은주 2008. 9. 5. 10:10

<%@ page contentType="text/html; charset=euc-kr" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Untitled Document</title>

<script language="javascript">
// 체크하는 함수
function f_chk(aro_name)
{
var ls_chk_tr_color1 = "red"; // 체크되면 변경될 tr의 색상
var ls_chk_tr_color2 = "#ffffff"; // 체크가 해제되면 변경될 tr의 색상

var ls_chk_font_color1 = "#ffffff"; // 체크되면 변경될 font의 색상
var ls_chk_font_color2 = "black"; // 체크가 해제되면 변경될 font의 색상

   // 이벤트가 발생한 Object
   var lo_this    = aro_name;
   var li_cells = 0; // 해당 rows의 cells 개수
   var ls_checked = "";    // 체크유무

li_cells = lo_this.cells.length; // 이벤트가 일어난 tr의 cells개수를 구한다.

   if(lo_this.bgColor == ls_chk_tr_color2)
   {
lo_this.bgColor = ls_chk_tr_color1;    // 백그라운드 색상을 변경해준다.
lo_this.style.color = ls_chk_font_color1; // 폰트 색상을 변경해준다.
ls_checked = true; // 체크박스를 체크한다.
   }
   else
   {
lo_this.bgColor = ls_chk_tr_color2;
lo_this.style.color = ls_chk_font_color2; // 폰트 색상을 변경해준다.
ls_checked = false;    // 체크박스를 체크하지 않는다.
   }

   // td를 순차적으로 돌면서 그 첫번째 요소가 체크박스인지 확인한다.
   for(var i=0; i<li_cells; i++)
   {
// 체크박스일경우에는 색상에 따라서 체크박스를 변경해준다.
if(lo_this.cells[i].childNodes(0).type == "checkbox")
{
   lo_this.cells[i].childNodes(0).checked = ls_checked;
}
   }

}
</script>

</head>

<body>

</body>
</html>