12/19 67-4 [JQuery] FormSelector+Exam

[FormSelector]

말도많고 탈도많은 form...

폼을우선...

<fieldset>
    <legend>jQuery의 폼 셀렉터</legend>
    <input type="button" value="Input Button"/><br />
    <input type="text"/><br />

    <input type="password"/><br />
    <input type="checkbox" value="정치" name="inter"  />정치
    <input type="checkbox" value="경제" name="inter"/>경제
   <input type="checkbox" value="연예" name="inter"/>연예
    <br />
    <input type="file" /><br />
    <input type="hidden" value="히든값"/><br />
    <input type="image" alt="이미지"  src="../images/1.jpg"/><br />
    <input type="radio" value="남" name="gender" />남
    <input type="radio" value="녀" name="gender"/>녀
    <br />
    <input type="reset" value="취소"/><br />
    <input type="submit" value="전송"/><br />	
    <select multiple >
        <option value="" >학교를 선택하세요</option>
        <option value="초등학교">초등학교</option>
        <option value="대학교">대학교</option>
    </select><br />

    <textarea >텍스트 에리어</textarea><br />
    <button>값 읽기</button>
    <button>값 설정</button>	    
</fieldset>

익숙한 폼이다... 으

1]input 과 :input 선택자
$("input") - input으로 시작하는 모든 태그 선택
$(":input") - input태그뿐만 아니라 폼의 모든 하위요소 태그 선택
폼 엘리먼트만 선택 ( input, select, textarea, button )

console.log('input태그 선택자:',$('input').length); //13
console.log(':input 폼 선택자:',$(':input').length); //17
console.log(':button 폼 선택자:',$(':button').length); // <button>도 포함됨 3개

val()함수- 폼의 하위요소의 값을 읽어오거나 설정]
-읽어올때 :$("폼 하위요소").val();
-설정할때 :$("폼 하위요소").val("값")


[값 읽기]
1.input type ="button"혹은 <button>태그
$(":button")으로 선택 시 input type="button"뿐만 아니라 <button>태그도 선택됨.
input type="button"만 선택하고자 할때는
$("input[type=button]") 혹은
$(":button[type=button]")

$(':button').each(function(index){   //  :button 하면 총 3개나옴
      console.log('%s버튼의 type속성:%s',index,$(this).prop('type'));
      console.log('%s버튼의 value속성:%s',index,$(this).prop('value'));
        if($(this).is('[type=button]')){  //
            console.log('버튼의 텍스트:',$(this).val());
        }
        else{ /// button태그 (type=submit)
            console.log('버튼의 텍스트:',$(this).html());
        }
});

2.input type="text"
:text 나 혹은 input[type=text]

console.log('type=text의 개수 :',$(':text').length);
console.log('type=text의 값 :',$(':text').val());

3.input type="password"
:text 나 혹은 input[type=password]

console.log('type=password 개수 :',$(':password').length);
console.log('type=password 값 :',$(':password').val());

4. :checkbox 혹은 input[type=checkbox]
$(":checkbox").val() : 체크 된 값을 읽어오는게 아니라 첫 번째 체크박스의 value값을 읽어 온다.
※체크된 것만 읽고자 할때
$(":checkbox:checked")에 each( )함수를 적용해서 얻는다.
$(":checked")는 체크박스.라디오버튼.선택상자 모두 포함해서 체크 된 모든 객체를 의미

console.log('체크된 총 요소 수:',$(':checked').length);
체크 상관없이 무조건 첫 번째 값만 읽어욤
console.log($(':checked').val()) 

체크된 것만 읽어오기
console.log('1. :checkbox:checked 와 each()함수 사용');
  $(':checkbox:checked').each(function(){
  console.log($(this).val())
  })

console.log('2. :checkbox 와 filter함수 each()함수 사용')
    $(':checkbox').filter(':checked').each(function(){
    console.log($(this).val())
})
console.log('3. :checkbox 와 if함수 each()함수 사용')
    $(':checkbox').each(function(){
        if($(this).prop('checked'))
            console.log($(this).val());
})

5.input type="file"

 console.log('type="file:',$(':file').val());

6.input type ='hidden'선택하지말고input[type=hidden]

console.log(':hidden:',$(':hidden').length); //12개 어휴 너무많아
$(':hidden').each(function(index,item){
	console.log('인덱스:%s,요소:%s',index,item)
	})
console.log('input[type=hidden]:',$('input[type=hidden]').length);
console.log(':input:hidden:',$(':input:hidden').length);

7.input type='image' :valu가없어서 값을 얻어올 수 없다
console.log('type=imaage:',$(':image').prop('src'))

8.input type='radio'
console.log('성별:%s',$(':radio:checked').val())

9.select태그:select 없다
console.log($(':select').val()) ==> error 이런 건 없음!!
console.log('select:',$('select').val())

다중선택 시
console.log(':selected:',$(':selected').val()) =>이건 O
$('select').children(':selected').each(function(){
console.log($(this).val())
})

10. textarea태그 얘도 :textarea는 없음
console.log("textarea(val):",$('textarea').val());
동적으로 변한 값은 읽어오지 못한다.
console.log("textarea(val):",$('textarea').html());


[값 설정] : 그나마 간단하니 한큐로

 폼의 하위요소 값 설정
1.input type="button"
$(':button:first').val('입력버튼');

2.input type="text"
$(':text').val('아이디를 입력하세요');  // 추가는 되지만 렌더링은 안됨 소스보기에선 안바뀜

3.intputype='password'
$(':password').val('1234');

4.체크박스 !!!
우왕신기  반드시 배열 초기화자[]로 값 설정 
방법1] 반드시 배열 초기화자[]로 값 설정	  
	 var checkBox =[];
	 checkBox.push('정치');
	 checkBox.push('연예');
	 $(':checkbox').val(checkBox);
     $(':checkbox').val(['정치','연예']);
 방법2] prop()함수 로 checked 속성 이용
   $(':checkbox').val(['정치','연예']);
   $(':checkbox[value=정치],:checkbox[value=연예]').prop('checked',true);

5.input type ="radio"  왜 대괄호냠... 값이 하나라도 반드시 [] 사용해
$(':radio').val(['녀']);              

6.select태그
방법1]val()사용
$('select').val(['초등학교','대학교']) 속성이 multiple 일 때
$('select').val('대학교')  
방법2]attr()함수 로 selected 속성 이용
$('select').children('[value=대학교]').prop('selected',true);
7.textarea
$('textarea').val('안녕하세요\r\n반가워요\r\n안녕');

 

---

FormSelectorExam

폼이요...

<fieldset>
    <legend>폼 셀렉터 연습</legend>
    <h2>텍스트 복사</h2>
    <input type="text"  id="src" />
    <input type="button" value="복사" />
    <input type="text"  id="desc" />
    <h2>선택상자의 값 복사</h2>
    <select  id="sel" >
        <option value="baseball">야구</option>
        <option value="balleyball">배구</option>
        <option value="scocker">축구</option>
    </select>
    <input type="text" id="sport" />
    <h2>radio상자의 값 복사</h2>
    <input type="radio" name="gender" value="M" />남자
    <input type="radio"	name="gender" value="W" />여자
    <input type="text" id="gender" />
    <input type="button" value="확인" id="btn" />
    <h2>메일선택</h2>
    <input type="checkbox" value="all">전체 선택
    <ul style="list-style-type: decimal;">
        <li><input type="checkbox" name="mailing" value="mail1" />메일1</li>
        <li><input type="checkbox" name="mailing" value="mail2" />메일2</li>
        <li><input type="checkbox" name="mailing" value="mail3" />메일3</li>
        <li><input type="checkbox" name="mailing" value="mail4" />메일4</li>
        <li><input type="checkbox" name="mailing" value="mail5" />메일5</li>
        <li><input type="checkbox" name="mailing" value="mail6" />메일6</li>
        <li><input type="checkbox" name="mailing" value="mail7" />메일7</li>
    </ul>
</fieldset>

$(function(){
    $(':button:first').click(function(){
        $('#desc').val($('#src').val());
    })

    $('#sel').change(function(){
        $('#sport').val($(this).val()==='baseball'? '야구' : $(this).val()=="balleyball" ? '배구' : '축구')
    });

    $('#btn').click(function(){
        $('#gender').val($(':radio:checked').val() === 'M'? '남자':'여자');
    })

         

    문제. 메일전체선택/해제 하기
    var mailingLength = $(':checkbox').slice(1).length;
    console.log('mailingLength:',mailingLength)
    $(':checkbox').click(function(){
        if($(this).val()==='all'){
            if($(this).prop('checked')) $(':checkbox').slice(1).prop('checked',true);
            else $(':checkbox').slice(1).prop('checked',false);
        }	
        else{
            if($(this).prop('checked')){
                if(mailingLength===$(':checkbox:checked').length){
                    $(':checkbox:first').prop('checked',true)
                }
                else
                $(':checkbox:first').prop('checked',false)
            }
        }
    });


  });