Jquery 자주 쓰는 기본! input, radio, select, checkbox 제어하기!!!

또르미

안녕하세요 또르미 입니다.

백만오천년만에 Jquery 관련 글 하나 써봅니다... 주위에 초보 친구들이 자꾸 물어보는게 비슷비슷해서 아싸리 남겨놓으면

'내가 덜 말해줘도 되잖아'

 

오늘 간단하게 작성할 내용은 Juqery로 각종 입력폼을 제어하는 방법입니다. 

id, name, data등... 여러가지 방법이 있지만 제가 편한 방법으로 몇가지만 적어 두었습니다용 

 

<span>사용자 명</span>
<input type="text" name="userName" id="userName" data-input-val="userName" /><br />

<span>사용자 나이</span>
<select name="userAge" id="userAge" data-input-val="userAge">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="40">40</option>
</select>
<br />
<span>사용자 성별</span>
<input type="radio" name="userGender" id="userGenderA" data-input-val="userGenderA" value="남성"/>
<label for="userGenderA">남성</label>
<input type="radio" name="userGender" id="userGenderB" data-input-val="userGenderB" value="여성"/>
<label for="userGenderB">여성</label>

<br />
<span>사용자 취미</span>
<input type="checkbox" name="userF" id="userFA" data-input-val="userFA" value="등산"/>
<label for="userFA">등산</label>
<input type="checkbox" name="userF" id="userFB" data-input-val="userFB" value="낚시"/>
<label for="userFB">낚시</label>
<input type="checkbox" name="userF" id="userFC" data-input-val="userFC" value="게임"/>
<label for="userFC">게임</label>

 

일단 예제로 사용될 HTML입니다. 엮시 간단합니다. input, select, radio, checkbox만 우선 정리하였읍니다.

웹개발을 하게 되시면서, DB에서 값을 불러오든 유효성 검사를 해서 특정값을 제어하든... 

입력폼에 대한 변경이 굉장히 자주자주자주자주자주 발생되게 됩니다

 

그럴때 그때그때 인터넷에서 긁어쓰지마시고 메모장 같은곳에 붙여두고 고이고이 쓰세요...

$(function(){

    /* input value값 변경 */
    //아이디로 선택해서 input value값 변경
    $("#userName").val("정또름");
    //data를 선택해서 input value값 변경
    $("[data-input-val='userName']").val("data 정또름")

    /* select option값 선택 */
    //id로 선택해서 변경
    $("#userAge option[value='20']").prop("selected", true);
    //data 로 선택해서 변경
    $("[data-input-val='userAge'] option[value='40']").prop("selected", true);
    //유일한 selectbox일시 그냥 selectbox로 잡아도 상관 무
    $("select option[value='30']").prop("selected", true);

    /* radio 값 선택 */
    //id로 선택해서 변경
    $("#userGenderA").prop("checked", true);
    //data로 선택해서 변경
    $("[data-input-val='userGenderB']").prop("checked", true);
    //값을 통한 선택
    $("input[type='radio'][value='남성']").prop("checked", true);

    /* checkbox 값 선택 */
    //id로 선택
    $("#userFA").prop("checked", true);
    //data로 선택
    $("[data-input-valu='userFA']").prop("checked", true);
    //checkbox 특정값을 통한 선택
    $("input[type='checkbox'][value='낚시']").prop("checked", true);

})

 

블로그 보시는 분들은 '아 저걸 왜 저렇게 쓰지' 라는분이 분명 계실듯 한데요!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

무조건 저렇게 사용한다는건 아니고 상황에  따라 다른 방식으로도 사용 할 수 있다는 점!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

알아주시면 감사하겠읍니다.

 

 

이만 총총총...