jQuery에서 라디오 버튼이 선택 또는 선택되었는지 확인하는 방법은 무엇입니까?

원래 게시된 @https://codeanddeploy.com 방문하여 샘플 코드 다운로드: https://codeanddeploy.com/blog/jquery/how-to-check-if-radio-button-is-checked-or-selected-in-jquery

이 게시물에서는 jquery를 사용하여 라디오 버튼이 이미 선택되어 있는지 확인하는 방법에 대해 설명합니다. 이는 일반적으로 추가 확인이 포함된 양식을 작성하는 경우에 적용됩니다. 이는 서버 측에 라디오 버튼을 제출하기 전에 어떤 라디오 버튼이 선택되었는지 결정하는 데 유용합니다. 귀하의 요구에 적합한 3가지 방법을 선택하여 적용해 보겠습니다.

방법 #1



:checked 선택자 및 val()과 함께 if 문을 사용하여 확인 여부를 확인합니다.

// Method #1 - check using if statement with :checked selector and val() to determine if checked
$("#btnSubmit1").on("click", function() {
    if($(".status1:checked").val()) {
        alert('checked')
    } else {
        alert('not checked.')
    }
});


방법 #2



.is() 함수와 :checked 선택자를 사용하여 라디오 버튼이 선택되었는지 확인합니다.

// Method #2 - check using is() function to determine if the radio button is checked
$("#btnSubmit2").on("click", function() {
    if($(".status2").is(':checked')) {
        alert('checked')
    } else {
        alert('not checked.')
    }
});


방법 #3



:checked 선택자를 사용하여 라디오 버튼 요소를 반복합니다. 선택한 라디오 버튼이 여러 개인 경우에 유용합니다.

// Method #3 - loop the radio button elements with :checked selector.
// useful if you have multiple selected radio button
$("#btnSubmit3").on("click", function() {
    $("[type=\"radio\"]:checked").each(function() {
        alert('checked')
    });
});


이제 선택한 라디오 버튼을 확인하는 방법에 대한 아이디어를 얻었습니다. 자신에게 맞는 것을 선택하십시오. 이제 이 게시물의 전체 소스 코드를 공유하겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>How to Check if Radio Button is Checked or Selected in jQuery?</title>
</head>
<body>
    <h1>How to Check if Radio Button is Checked or Selected in jQuery?</h1>

    <h2>Method #1 - check using if statement with :checked selector and val() to determine if checked</h2>
    <form id="form1">
        <label>Click here
            <input type="radio" value="1" name="status1" class="status1" required="required">
        </label>
        <br/><br/>
        <button type="button" id="btnSubmit1">Check Status</button>
    </form>

    <br/><br/><br/><br/>

    <h2>Method #2 - check using is() function to determine if the radio button is checked</h2>
    <form id="form2">
        <label>Click here
            <input type="radio" value="regular" name="status2" class="status2" required="required">
        </label>
        <br/><br/>
        <button type="button" id="btnSubmit2">Check Status</button>
    </form>

    <br/><br/><br/><br/>

    <h2>Method #3 - loop the radio button elements with :checked selector</h2>
    <p>useful if you have multiple selected radio button</p>
    <form id="form3">
        <label>Click here
            <input type="radio" value="regular" name="status3" class="status3" required="required">
        </label>
        <br/><br/>
        <button type="button" id="btnSubmit3">Check Status</button>
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            // Method #1 - check using if statement with :checked selector and val() to determine if checked
            $("#btnSubmit1").on("click", function() {
                if($(".status1:checked").val()) {
                    alert('checked')
                } else {
                    alert('not checked.')
                }
            });


            // Method #2 - check using is() function to determine if the radio button is checked.
            $("#btnSubmit2").on("click", function() {
                if($(".status2").is(':checked')) {
                    alert('checked')
                } else {
                    alert('not checked.')
                }
            });

            // Method #3 - loop the radio button elements with :checked selector.
            // useful if you have multiple selected radio button.
            $("#btnSubmit3").on("click", function() {
                $("[type=\"radio\"]:checked").each(function() {
                    alert('checked')
                });
            });
        });
    </script>
</body>
</html>


이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/jquery/how-to-check-if-radio-button-is-checked-or-selected-in-jquery를 방문하십시오.

행복한 코딩 :)

좋은 웹페이지 즐겨찾기