jQuery

[jQuery] 9장 get/set 메소드3

반응형

 

get/set 메소드3

 

 

메소드 설 명
prop(property) 속성 값  반환
(존재하지 않으면 undefined반환)
ex) $(“a”).prop(“color”);
prop(property, value) 속성 및 값 설정
ex) $(“a”).prop(“color”, “FF0000”);
prop(property, fn(index,currentvalue)) 함수를 사용해 속성 및 값 설정
prop({property:value, property:value, … }) 여러 속성 및 값 설정
removeProp(properties) 속성 제거
ex) $(“a”).removeProp(“color”);

 

 

 

attr()과 prop() 비교

 

 

get/set 체크 됨 체크 안됨
attr('checked') 'checked' undefined
속성에 checked가 없으면 undefined
prop('checked') true false
$(‘:checkbox’).attr(‘checked’, true);
$(‘:checkbox’).prop(‘checked’, true);

 

 

 

  • 현재 상태 값 출력
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h4>요소의 상태 제어(상태 값을 boolean으로 반환받음)</h4>
    <form>
        <input type="checkbox" id="chk" checked>
        <input type="radio" id="rdo">
        <select id="sel">
            <option value="">-</option>
            <option value="1">일</option>
            <option value="2">이</option>
            <option value="3">삼</option>
            <option value="4">사</option>
        </select>
        <input value="가나다" id="txt" readonly> <br><br>

        <input type="button" value="현재 상태 값 출력" id="runBtn">
    </form>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // use strict는 주석을 제외하고 스크립트의 가장 최상단에 배치해야 제 기능을 함
    // "use strict"; // 가장 최신방식의 문법이 적용되었는지 검증하고 가이드 해주는 역할의 문장

    let $chk, $rdo, $sel, $txt;

    $('#runBtn').on('click', function(){
        $chk = $('#chk').prop('checked');
        // $chk1 = $('#chk').attr('checked'); // 속성 존재시 속성 그대로 반환 'checked'
        $rdo = $('#rdo').prop('checked');
        // $rdo1 = $('#rdo').attr('checked'); // 속성 없을 때 undefined 반환
        $sel = $('#sel option').eq(2).prop('selected');
        $txt = $('#txt').prop('readonly');

        console.log("체크>> " + $chk, "라디오>> " + $rdo, "콤보>> " + $sel, "텍스트>> " + $txt);
    });
</script>
</body>
</html>

 

결과 화면1

 

 

 

  • 반대 상태로 변경
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h4>요소의 상태 제어(상태 값을 boolean으로 반환받음)</h4>
    <form>
        <input type="checkbox" id="chk" checked>
        <input type="radio" id="rdo">
        <select id="sel">
            <option value="">-</option>
            <option value="1">일</option>
            <option value="2">이</option>
            <option value="3">삼</option>
            <option value="4">사</option>
        </select>
        <input value="가나다" id="txt" readonly> <br><br>

        <input type="button" value="반대 상태로 변경" id="chgBtn">
    </form>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // use strict는 주석을 제외하고 스크립트의 가장 최상단에 배치해야 제 기능을 함
    // "use strict"; // 가장 최신방식의 문법이 적용되었는지 검증하고 가이드 해주는 역할의 문장

    let $chk, $rdo, $sel, $txt;

    $('#chgBtn').on('click', function(){
        // $('#chk').prop('checked'); // get

        $('#chk').prop('checked', !$chk); // set
        $('#rdo').prop('checked', !$rdo);
        $('#sel option').eq(2).prop('selected', !$sel);
        $('#txt').prop('readonly', !$txt);
    });

</script>
</body>
</html>

 

결과 화면2

 

 

 

  • 전체 체크
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h4>요소의 상태 제어(상태 값을 boolean으로 반환받음)</h4>
    
    <input type="checkbox" id="allChk">전체선택 <br>
    <input type="checkbox" class="chk">1 <br>
    <input type="checkbox" class="chk">2 <br>
    <input type="checkbox" class="chk">3 <br>
    <input type="checkbox" class="chk">4 <br>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('#allChk').on('click', function(){
        let $allChk = $('#allChk').prop('checked'); // get

        // 나머지 1,2,3,4
        $('.chk').prop('checked', $allChk); // set
    });
</script>
</body>
</html>

 

결과 화면3 : 전체 선택 시 모두 체크됨 but 하나를 뺄 때도 전체선택 되어 있음

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h4>요소의 상태 제어(상태 값을 boolean으로 반환받음)</h4>

    <input type="checkbox" id="allChk">전체선택 <br>
    <input type="checkbox" class="chk">1 <br>
    <input type="checkbox" class="chk">2 <br>
    <input type="checkbox" class="chk">3 <br>
    <input type="checkbox" class="chk">4 <br>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('#allChk').on('click', function(){
        let $allChk = $('#allChk').prop('checked'); // get

        // 나머지 1,2,3,4
        $('.chk').prop('checked', $allChk); // set
        // 전체선택 요소의 아랫쪽 정보들에 접근
        // $(this).nextAll().prop('checked', $allChk);
        // JQ - Dom접근 메소드 상위요소를 검색하는 parent(), 하위요소 검색 find()
        // $(this).parent().find('.chk').prop('checked', $allChk); // 비효율
    });

    // 전체선택 다음 요소로 제어하기
    $('.chk').on('click', function(){
        console.log( $('.chk').length, $('.chk:checked').length );

        let $chk = $('.chk').length;
        let $choose = $('.chk:checked').length;

        if($chk == $choose) {
            $('#allChk').prop('checked', true);
        } else {
            $('#allChk').prop('checked', false);
        }
    });
</script>
</body>
</html>

 

결과 화면4

 

 

반응형

'jQuery' 카테고리의 다른 글

[jQuery] 11장 스타일시트 관련 메소드, 넓이와 높이 관련 메소드  (0) 2024.02.23
[jQuery] 10장 요소 추가 메소드, 삭제 및 복사 메소드  (0) 2024.02.22
[jQuery] 8장 get/set 메소드2  (0) 2024.02.22
[jQuery] 7장 get/set 메소드1  (0) 2024.02.22
[jQuery] 6장 기타 필터  (0) 2024.02.21

티스토리툴바