자바 스크립트에서 라디오 버튼 값 확인

Aug 18 2020

javascript, HTML, CSS, Bootstrap을 사용하여 Tennis Club Management 라는 샘플 프로젝트를 개발 중 입니다. 이 프로젝트 에는 플레이어 추가 및 플레이어 표시 버튼이 두 개 있는 managePlayers.html 페이지가 있습니다 . 플레이어 추가 버튼을 클릭하면 아래에 ID, DOB, 이름, 성별, 연락처, 성별에 대한 2 개의 라디오 버튼 이 포함 된 테이블이 표시됩니다 . .

참고 : 내가해야 할 일은 저장 버튼을 클릭 하면 라디오 중 하나가 선택되었는지 여부를 확인해야한다는 것입니다 (이 경우 성별 : 남성 / 여성 ..). 아직 알아낼 수 없었습니다 아래는 코드 파일과 스크린 샷입니다.

Jsfiddle 링크 : https://jsfiddle.net/mohitsharma1991/40yz7tv6/1/

index.js


//---------------------TESTING CODE FOR DISPLAYING TABLE FOR ADDING CUSTOMER INFORMATION--------------- 


function addplayers() {

    // playerIDvalue += 1;
    document.querySelector("#customerregistration").style.display = "block";
    if (istableCreated) {
        document.querySelector("#table-responsive").style.display = "none";
    }
    // document.querySelector(".playerID").value = playerIDvalue;
}



//--------------------------TESTING CODE FOR SAVING CUSTOMER INFORMATION OF MANAGE PLAYERS PAGE-----------------------------



function savePlayer() {
    console.log("data saved successfully...");
    var playerBirthday = document.querySelector(".playerbirthday").value;
    var playerName = document.querySelector(".playername").value;
    var playerContact = document.querySelector(".playercontact").value;
    var playerAddress = document.querySelector(".playeraddress").value;
    var playerGender = document.querySelector('input[name="gender"]:checked').value;
    var playerID = document.querySelector(".playerID").value;


    var customerIDProof = document.querySelector(".customeridproof").value;
    var customerIDProofTextBox = document.querySelector(".customeridprooftextbox").value;
    var membershipFor = document.querySelector(".membershipfor").value;
    var membershipType = document.querySelector(".membershiptype").value;
    //console.log(playerBirthday,playerName,playerContact,playerAddress,playerGender,customerIDProof,customerIDProofTextBox,membershipFor,membershipType);


    if (playerID == "") {
        document.querySelector(".playerIDlabel").innerHTML = "*Cannot be blank"
        // console.log("ID cannot be blank");
    }
    else if (playerBirthday == "") {
        document.querySelector(".playerbirthdaylabel").innerHTML = "*Select Date"
    }
    else if (playerContact == "") {
        document.querySelector(".playercontactlabel").innerHTML = "*Cannot be blank";
    }
    else if (playerName == "") {
        document.querySelector(".playernamelabel").innerHTML = "*Cannot be blank";
    }
    else if ((!playerGender == "Male") && (!playerGender == "Female")) {
        document.querySelector(".genderlabel").innerHTML = "*Cannot be blank";
    }
    else if (playerAddress == "") {
        document.querySelector(".playeraddresslabel").innerHTML = "*Cannot be blank";
    }
    else if (customerIDProof == "---Select---") {
        document.querySelector(".customeridprooflabel").innerHTML = "*Select value";
    }
    else if (customerIDProofTextBox == "") {
        document.querySelector(".customeridprooflabel").innerHTML = "*Cannot be blank";
    }
    else if (membershipFor == "---Select---") {
        document.querySelector(".membershipforlabel").innerHTML = "*Select value";
    }
    else if (membershipType == "---Select---") {
        document.querySelector(".membershiptypelabel").innerHTML = "*Select value";
    }
    else {
        addPlayerList.push({
            "ID": playerIDvalue,
            "DOB": playerBirthday,
            "Gender": playerGender,
            "Address": playerAddress,
            "IDProof": customerIDProof,
            "IDProofValue": customerIDProofTextBox,
            "membershipFor": membershipFor,
            "membershipType": membershipType,
            "playerContact": playerContact,
            "playerName": playerName
        });
    }




    console.log(addPlayerList);
    return false;
}

managePlayers.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manage Players</title>

    <!-- ADDING FONT AWESOME CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- ADDING BOOTSTRAP CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <!-- ADDING STYLE.CSS -->
    <link rel="stylesheet" href="/css/style.css">

</head>

<body class="managePlayers">

    <!-- ADDING BUTTONS LIKE SHOW PLAYERS, ADD PLAYERS USING CSS BOOTSTRAP -->

    <button type="button" class="btn btn-secondary showplayers" onclick="showplayers();">Show Players</button>
    <button type="button" class="btn btn-secondary addplayers" onclick="addplayers()">Add Players</button>

    <!-- CREATING REGISTRATION FORM OF CUSTOMER -->

    <table class="customerregistration" id="customerregistration">
        <tr>
            <td>
                <Label>ID :</Label>
            </td>
            <td>
                <input type="text" class="playerID" id="playerID">
            </td>
            <td>
                <label class="playerIDlabel"></label>
            </td>
        </tr>
        <tr>
            <td>
                <label>DOB :</label>
            </td>
            <td>
                <input type="date" id="playerbirthday" class="playerbirthday">
            </td>
            <td>
                <label class="playerbirthdaylabel"></label>
            </td>
        </tr>
        <tr>
            <td>
                <label>Name :</label>
            </td>
            <td>
                <input type="text" class="playername" id="playername">
            </td>
            <td>
                <label class="playernamelabel"></label>
            </td>
        </tr>

        <tr>
            <td>
                <label>Gender :</label>
            </td>
            <td>
                <input type="radio" name="gender" value="female" class="playergender" id="femaleplayer"> Female
                <input type="radio" name="gender" value="male" class="playergender" id="maleplayer"> Male
            </td>
            <td>
                <label class="genderlabel"></label>
            </td>
        </tr>

        <tr>
            <td>
                <label>Contact :</label>
            </td>
            <td>
                <input type="text" class="playercontact" id="playercontact">
            </td>
            <td>
                <label class="playercontactlabel"></label>
            </td>
        </tr>

        <tr>
            <td>
                <label>Address :</label>
            </td>
            <td>
                <textarea class="playeraddress" id="playeraddress" cols="20" rows="3"></textarea>
            </td>
            <td>
                <label class="playeraddresslabel"></label>
            </td>
        </tr>

        <tr>
            <td>
                <label>ID Proof :</label>
                <select class="customeridproof" id="customeridproof">
                    <option value="select">---Select---</option>
                    <option value="license">License</option>
                    <option value="aadhaar">Aadhaar</option>
                    <option value="passport">Passport</option>
                </select>
            </td>
            <td>
                <input type="text" class="customeridprooftextbox">
            </td>
            <td>
                <label class="customeridprooflabel"></label>
            </td>
        </tr>

        <tr>
            <td>
                <label>Membership For :</label>
            </td>
            <td>
                <select class="membershipfor" id="membershipfor">
                    <option value="select">---Select---</option>
                    <option value="court">Court</option>
                    <option value="tournament">Tournament</option>
                    <option value="both">Both</option>
                </select>
            </td>
            <td>
                <label class="membershipforlabel"></label>
            </td>
        </tr>

        <tr>
            <td>
                <label>Membership Type :</label>
            </td>
            <td>
                <select class="membershiptype" id="membershiptype">
                    <option value="select">---Select---</option>
                    <option value="monthly">Monthly</option>
                    <option value="halfyearly">Half Yearly</option>
                    <option value="annually">Annually</option>
                </select>
            </td>
            <td>
                <label class="membershiptypelabel"></label>
            </td>
        </tr>
        <tr>
            <td>
                <button type="button" class="btn btn-success saveplayer" onclick="savePlayer()">SAVE</button>
            </td>
        </tr>
    </table>



    <!-- ADDING BOOTSTRAP JS -->
    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>

    <!-- ADDING INDEX.JS -->
    <script src="/js/sidebar.js"></script>
    <script src="/js/index.js"></script>

</body>

</html>

스크린 샷

어떤 해결책이라도 제발?

답변

1 AlwaysHelping Aug 18 2020 at 11:56

당신은 간단하게 사용할 수 있습니다 확인 하는 확인하기 위해 입력의 속성을 gender이었다 checked플레이어와 푸시를 저장하는 동안 그 value로array

checked속성은 반환 true또는 false각 라디오 버튼과를 할당합니다 value리셀러 (VAR)에 playerGender-에서 예 는 것을의 하지 var에 어떤 라디오 버튼 선택 playerGender정의되지 않습니다를 한 후 우리는 할 수있는 오류 메시지.