visibility필터2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
   $('#hidden').on('click',function(){
         str="";
         
      $('#testForm :hidden').each(function(i){
//          alert(this.tagName);
         if(this.tagName == "INPUT"){
        	 vtype = $(this.tagName == "INPUT");
        		 if(vtype == "radio"){
        			 // 둘중 하나만 선택, 선택한 값만 가져오기
        			str += vtype +  $(':radio:checked').val()
        		 
        	 }
        	 
            str += this.tagName + "&nbsp;&nbsp;&nbsp;"
                  + $(this).attr('name') 
                  + " : " 
                  + $(this).val() + "<br>";
         
         }else{
            str += this.tagName 
                  + " : " 
                  + $(this).text()+ "<br>";            
         }
      })   
      $('#result1 div:eq(0)').html(str);
   })   
   
   $('#visible').on('click',function(){
	   
	   str="";
	   $('#testForm *:visible').each(function(i){
		   
		   if(this.tagName == "INPUT"){
			   vtype = $(this).attr('type');
			   
				   //둘 중 하나만 선택, 선택한 값만 가져오기
			   if(vtype == "radio"){
				   if($(this).prop('checked')){
					   str += vtype + " : " + $(this).val() + "<br>"
				   }
				   
					   
			   }else{
				   //text
				   str += this.tagName + "&nbsp;&nbsp;&nbsp;"
			       + $(this).attr('name') + " : " 
			       + $(this).val() + "<br>"
				   
			   }
			   
			       
		   }else if(this.tagName != "BR"){
			   str += this.tagName + " : "+ $(this).text() + "<br>"
			   
		   }
	   })
            
	   $('#result1 div:eq(1)').html(str);
   })   
      
 })

</script>

</head>
<body>


<div class="box">
   input 태그,선택(select), textarea를 제외한 태그(요소)의 내용 얻기<br>
   html()<br>
   text()<br>
   input 태그 입력, 선택(select) textarea의 값 얻기<br>
   val()<br>
   속성이름을 이용한 속성값 얻기<br>
   attr('속성이름') attr('type') attr('name')<br>
   <br>
   속성의 상태를 얻어온다 - disabled checked selected multiple readonly<br>
   prop('checked') - check되어 있으면 true, 아니면 false를 리턴한다<br>
   <br>
   <button id="hidden" type="button">hidden</button>
   <button id="visible" type="button">visible</button>
   <div id="result1">
   
      <form id="testForm"> 
         <input type="hidden" disabled="disabled" name="userAge" value="33">
         <input type="hidden" name="userCity" value="대전">
         
         I D : <input type="text" name="userID" value="hong">  
         <span style="display:none">ID가 중복됩니다. </span> <br>  
         
	         이름 : <input type="text" name="userName" value="홍길동">   
	         <span style="visibility:hidden">이름을 입력하세요</span><br>  
	         
	         성별 : <input type="radio" name="sung" value="" checked="checked">남자  
	         <input type="radio" name="sung" value="">여자  
      </form>
   
      <div></div>
      <div></div>
   
   
   
   </div>
</div>

</body>
</html>

좋은 웹페이지 즐겨찾기