jQuery checkbox 컨트롤


1. checkbox checked 여부 :

id인 경우 : $('input:checkbox[id="checkbox_id"]').is(":checked") == true

name인 경우 : $('input:checkbox[name="checkbox_name"]').is(":checked") ==  true

 

=>  $('input[id="checkbox_id"]') + 옵션 형태로 작성 해도 문제는 없다

Ex) $('input[name="checkbox_name"]').is(":checked")


2. checkbox 전체 갯수 : $('input:checkbox[name="checkbox_name"]').length

3. checkbox 선택된 갯수 : $('input:checkbox[name="checkbox_name"]:checked').length

* 2,3번은 name 인 경우에만 가능

 

4. checkbox 전체 순회 하며 처리(동일한 name으로 여래개인 경우 전체를 컨트롤 할 수 있다.)

 $('input:checkbox[name="checkbox_name"]').each(function() {

      this.checked = true; //checked 처리

      if(this.checked){//checked 처리된 항목의 값

            alert(this.value);

      }

 });


5. checkbox 전체 순회 하며 값을 값을 비교하여 checked 처리

 $('input:checkbox[name="checkbox_name"]').each(function() {

     if(this.value == "비교값"){ //값 비교

            this.checked = true; //checked 처리

      }

 });


* 동일한 name 으로 1개 or 여러개 있을 경우에는 같은 name 으로 된 모든 checkbox checked 처리된다.


6. checkbox value 값 가져오기 :  $('input:checkbox[id="checkbox_id"]').val(); //단일건

7. checkbox checked 처리 하기 : $('input:checkbox[id="checkbox_id"]').attr("checked", true); //단일건

8. checkbox checked 여부 간단 확인: $("#checkbox_id"]').is(":checked"); //단일건

 

=== Reference ===

* 만약 해당 id, name이 존재하지 않더라도 javascript 에러가 발생하지 않는다.



출처: http://openlife.tistory.com/381 [물고기 많은 바다]





2016/08/01 16:44 2016/08/01 16:44

<html>
<head>
<style type="text/css">
<!--
#sponsorAdDiv {position:absolute; height:1; width:1; top:0; left:0;}
-->
</style>
<SCRIPT LANGUAGE="JavaScript1.2">

adTime=180;  // 보여줄 초 입력
chanceAd=1; // ad will be shown 1 in X times (put 1 for everytime)

var ns=(document.layers);
var ie=(document.all);
var w3=(document.getElementById && !ie);
adCount=0;
function initAd(){
       if(!ns && !ie && !w3) return;
       if(ie)                adDiv=eval('document.all.sponsorAdDiv.style');
       else if(ns)        adDiv=eval('document.layers["sponsorAdDiv"]');
       else if(w3)        adDiv=eval('document.getElementById("sponsorAdDiv").style');
       randAd=Math.ceil(Math.random()*chanceAd);
       if (ie||w3)
       adDiv.visibility="visible";
       else
       adDiv.visibility ="show";
       if(randAd==1) showAd();
}
function showAd(){
if(adCount<adTime*10){adCount+=1;
       if (ie){documentWidth  =document.body.offsetWidth/2+document.body.scrollLeft-20;
       documentHeight =document.body.offsetHeight/2+document.body.scrollTop-20;}
       else if (ns){documentWidth=window.innerWidth/2+window.pageXOffset-20;
       documentHeight=window.innerHeight/2+window.pageYOffset-20;}
       else if (w3){documentWidth=self.innerWidth/2+window.pageXOffset-20;
       documentHeight=self.innerHeight/2+window.pageYOffset-20;}
       adDiv.left=documentWidth-200;adDiv.top =documentHeight-200;
       setTimeout("showAd()",100);}else closeAd();
}
function closeAd(){
if (ie||w3)
adDiv.display="none";
else
adDiv.visibility ="hide";
}
onload=initAd;
//End-->
</script>

</head>

<body>


<div id="sponsorAdDiv" style="visibility:hidden">

       <table border="0" cellpadding="0" cellspacing="1" width="300" bgcolor="gray">
   <tr>
       <td width="288" height="145" valign="top" bgcolor="white"><p>태그인넷입니다<br>
           www.tagin.net<br>이 레이어는 3초뒤 사라집니다</td>
   </tr>
</table>
</div>

</body>

</html>


2007/06/21 15:51 2007/06/21 15:51
Tags:

<HTML>
<HEAD>
   <TITLE>BLUEB</TITLE>

<script language=javascript>
prog_sec   = 0.5; // Prosess time
length_bar = 300; // Bar length
cnt_img    = 15;  // Number of image
width_img  = length_bar/cnt_img; // width of image
height_img = 8;                  // height of image

var chk_cnt   = 0;
var prog_per  = 0;
var time_unit = (prog_sec*1000)/cnt_img;

function progress() {
       if(chk_cnt < cnt_img) {
               document.images["prog_img"+chk_cnt].src = "http://www.blueb.co.kr/SRC/javascript/image/prog_bar.gif";
               chk_cnt++;
              
               prog_per = Math.round((chk_cnt/cnt_img)*100);
               if(document.all) {                 // ie4+
                       document.all.prog_num.innerHTML = prog_per + "%";
               }
               else if(document.getElementById) { // nn6+
                       document.getElementById("prog_num").innerHTML = prog_per + "%";
               }
              
               if(chk_cnt == cnt_img) {
                       window.location.replace("http://www.blueb.co.kr");
               }
               setTimeout("progress();", time_unit);
       }
}
</script>

<body onLoad="progress();" >

<script language=javascript>
   for(i=0;i<cnt_img;i++) {
           document.write("<img src=http://www.blueb.co.kr/SRC/javascript/image/prog_bg.gif width="+width_img+" height="+height_img+" name=prog_img"+i+" border=0>");
   }
</script>
<div id=prog_num class=small></div>

2007/03/24 12:22 2007/03/24 12:22

This is a protected post. Please enter the password to view the article.
이 글은 비밀글입니다. 글을 보시려면 비밀번호를 입력하세요.

본문내 검색!!

2007/03/16 10:17

This is a protected post. Please enter the password to view the article.
이 글은 비밀글입니다. 글을 보시려면 비밀번호를 입력하세요.

다운로드 시 참고

2007/03/16 10:16

This is a protected post. Please enter the password to view the article.
이 글은 비밀글입니다. 글을 보시려면 비밀번호를 입력하세요.

disabled

2007/03/16 10:09

This is a protected post. Please enter the password to view the article.
이 글은 비밀글입니다. 글을 보시려면 비밀번호를 입력하세요.

정의001

2007/03/11 16:39

This is a protected post. Please enter the password to view the article.
이 글은 비밀글입니다. 글을 보시려면 비밀번호를 입력하세요.

This is a protected post. Please enter the password to view the article.
이 글은 비밀글입니다. 글을 보시려면 비밀번호를 입력하세요.

<html>
<head>
<script>
var x,y
var flag=false
var obj
function table_resize_start(e){
flag=true
if(document.all){
  obj=e.srcElement
  x=obj.style.pixelLeft+10
  y=obj.style.pixelTop+10
  }
else if(document.getElementById){
  obj=e.target
  x=parseInt(obj.style.left.replace("px",""))+10
  y=parseInt(obj.style.top.replace("px",""))+10
  }
}
function table_resize(e){
if(flag){
  if(document.all){
  xx=e.clientX-x
  yy=e.clientY-y
  obj.style.pixelWidth=xx
  obj.style.pixelHeight=yy
  }
  else if(document.getElementById){
  xx=e.pageX-x
  yy=e.pageY-y
  obj.style.width=xx+"px"
  obj.style.height=yy+"px"
  }
  }
}
function table_resize_end(){
flag=false
}

</script>

</head>
<body onmousemove=table_resize(event) onmouseup=table_resize_end()>
<textarea style="position:absolute;top:10px;left:10px;cursor:move;border:solid 2px silver;" onmousedown=table_resize_start(event)>
</textarea>
</body>
</html>


2007/02/15 16:55 2007/02/15 16:55
Tags: