No sweet without sweat

속성 상태에 따른 탐색 선택자 (visible, hidden, selected, checked) 본문

JavaScript

속성 상태에 따른 탐색 선택자 (visible, hidden, selected, checked)

Remi 2021. 7. 25. 16:18
728x90
반응형
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="JS/jquery.js"></script>
    <script>
        $(function () {
            $("#wrap p:hidden")
            .css({
                "display":"block",
                "background":"#ff0"
            });

            var z1 =$("#zone1 :selected").val()
            console.log(z1)
            var z2 =$("#zone2 :checked").val()
            console.log(z2)
            var z3 =$("#zone3 :checked").val()
            console.log(z3)
        });
    </script>

</head>

<body>
    <div id="wrap">
        <p>내용1</p>
        <p style="display: none">내용2</p>
        <p>내용3</p>
    </div>
    <form action="#">
        <p id="zone1">
            <select name="course" id="course">
                <option value="opt1">옵션1</option>
                <option value="opt2" selected>옵션2</option>
                <option value="opt3">옵션3</option>
            </select>
        </p>
        <p id="zone2">
            <input type="checkbox" name="hobby1" value="독서"> 독서
            <input type="checkbox" name="hobby2" value="자전거"> 자전거
            <input type="checkbox" name="hobby3" value="등산" checked> 등산
        </p>
        <p id="zone3">
            <input type ="radio" name = "gender" value="male">남성
            <input type ="radio" name = "gender" value="female" checked>여성
        </p>
    </form>
</body>

</html>
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

[JavaScript] - jquery(선택자) - 2  (0) 2022.08.02
[JavaScript] - jquery(선택자) - 1  (0) 2022.08.01
[Javascript] - inline, 조건문, 반복문, 배열함수(push,pop,unshift,shift)  (0) 2022.07.28
[Javascript] - alert, prompt, console  (0) 2022.07.27
$.inArray()/$.isArray()/$.merge()  (0) 2021.07.25
'JavaScript' Related Articles more
Comments