Kiểm tra giá trị nút radio trong Javascript

Question

Tôi đang phát triển một dự án mẫu có tên: Quản lý câu lạc bộ quần vợt sử dụng javascript, HTML, CSS, Bootstrap. Trong dự án này, tôi có một trang managementPlayers.html trong đó có hai nút Thêm người chơi & Hiển thị người chơi . Khi nhấp vào nút Thêm người chơi , một bảng có các trường nhập xuất hiện bên dưới, trong đó có ID, DOB, Tên, Giới tính, Liên hệ, 2 nút radio cho giới tính và nút LƯU. .

Lưu ý: Điều tôi cần làm là khi nhấp vào nút lưu , nó sẽ kiểm tra xem một trong hai đài đã được chọn hay chưa (Giới tính: nam / nữ .. trong trường hợp này). Tôi chưa thể tìm ra nó. Dưới đây là các tệp mã và ảnh chụp màn hình

Liên kết 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;
}

managementPlayers.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>

Ảnh chụp màn hình

Bất kỳ giải pháp xin vui lòng?

Answer 1

Bạn chỉ có thể sử dụng kiểm tra tài sản của đầu vào của bạn để xem genderđược checkedtrong khi tiết kiệm các cầu thủ và đẩy mà valueđến của bạnarray

Các checkedbất động sản sẽ trở lại truehoặc falsecho mỗi nút radio và sẽ chỉ định một valueđể var của bạn playerGender- Trong ví dụ của bạn đã không chọn bất kỳ nút radio var playerGendersẽ được undefined và sau đó chúng ta có thể được thông báo lỗi.

Tôi đã thêm mã làm việc trong bản demo và nếu bạn không chọn bất kỳ điều gì trong giới tính, bạn sẽ thấy thông báo này *Cannot be blanked

Demo làm việc

// --------------TESTING CODE FOR LOGIN PAGE LOGIN BUTTON CLICK----------------

var istableCreated = false;
var email, password, playerIDvalue = 0;
var addPlayerList = [];
var addtournamentsList = [];
var addTrainersList = [];
var addMatchList = [];
var addFeesList = [];


//------------------------------------"MANAGE PLAYERS PAGE"----------------------------------

//--------------------------------TESTING CODE FOR SHOWING PLAYERS OF MANAGE PLAYERS PAGE--------------------------
function showplayers() {
  document.querySelector("#customerregistration").style.display = "none";

  if (istableCreated == false) {


    istableCreated = true;

    var myTable = document.createElement("table");
    myTable.className = "table-responsive";
    myTable.id = "table-responsive";
    myTable.style.marginLeft = "15%";
    document.body.appendChild(myTable);

    var maintr = document.createElement("tr");
    document.body.appendChild(myTable).appendChild(maintr);

    var thID = document.createElement("th");
    thID.innerHTML = "ID";
    document.body.appendChild(myTable).appendChild(maintr).appendChild(thID);

    var thplayerName = document.createElement("th");
    thplayerName.innerHTML = "Player Name";
    document.body.appendChild(myTable).appendChild(maintr).appendChild(thplayerName);

    // var thDOB = document.createElement("th");
    // thDOB.innerHTML = "DOB";
    // document.body.appendChild(myTable).appendChild(maintr).appendChild(thDOB);

    // var thGender = document.createElement("th");
    // thGender.innerHTML = "Gender";
    // document.body.appendChild(myTable).appendChild(maintr).appendChild(thGender);

    var thAddress = document.createElement("th");
    thAddress.innerHTML = "Address";
    document.body.appendChild(myTable).appendChild(maintr).appendChild(thAddress);

    // var thIDProof = document.createElement("th");
    // thIDProof.innerHTML = "ID Proof";
    // document.body.appendChild(myTable).appendChild(maintr).appendChild(thIDProof);

    // var thIDProofValue = document.createElement("th");
    // thIDProofValue.innerHTML = "Value";
    // document.body.appendChild(myTable).appendChild(maintr).appendChild(thIDProofValue);

    // var thmembershipFor = document.createElement("th");
    // thmembershipFor.innerHTML = "Membership For";
    // document.body.appendChild(myTable).appendChild(maintr).appendChild(thmembershipFor);

    // var thmembershipType = document.createElement("th");
    // thmembershipType.innerHTML = "Membership Type";
    // document.body.appendChild(myTable).appendChild(maintr).appendChild(thmembershipType);

    var thcontact = document.createElement("th");
    thcontact.innerHTML = "Contact";
    document.body.appendChild(myTable).appendChild(maintr).appendChild(thcontact);


    //-------------TESTING CODE FOR FETCHING ONLINE DATA FROM API AND CREATING TABLE ROWS--------------


    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        // console.log(this.responseText);
        var JSONarr = JSON.parse(this.responseText);
        console.log(JSONarr);

        // ----------SUPER TESTING CODE-----------

        for (var i = 0; i < JSONarr.length; i++) {
          console.log(JSONarr[i].id, JSONarr[i].name, JSONarr[i].address.city, JSONarr[i].address.zipcode);

          var myTr = document.createElement("tr");
          document.body.appendChild(myTable).appendChild(myTr);
          var tdID = document.createElement("td");
          tdID.innerHTML = `${JSONarr[i].id}`; document.body.appendChild(myTable).appendChild(myTr).appendChild(tdID); var tdplayerName = document.createElement("td"); tdplayerName.innerHTML = `${JSONarr[i].name}`;
          document.body.appendChild(myTable).appendChild(myTr).appendChild(tdplayerName);

          var tdAddress = document.createElement("td");
          tdAddress.innerHTML = `${JSONarr[i].address.city}`; document.body.appendChild(myTable).appendChild(myTr).appendChild(tdAddress); var tdContact = document.createElement("td"); tdContact.innerHTML = `${JSONarr[i].phone}`;
          document.body.appendChild(myTable).appendChild(myTr).appendChild(tdContact);


        }

      }
    };
    xhttp.open("GET", "https://jsonplaceholder.typicode.com/users", true);
    xhttp.send();






    /*
    for (var i = 0; i < addPlayerList.length; i++) {

        console.log(addPlayerList.length);
        var myTr = document.createElement("tr");
        document.body.appendChild(myTable).appendChild(myTr);
        var tdID = document.createElement("td");
        tdID.innerHTML = `${addPlayerList[i].ID}`; document.body.appendChild(myTable).appendChild(myTr).appendChild(tdID); var tdplayerName = document.createElement("td"); tdplayerName.innerHTML = `${addPlayerList[i].playerName}`;
        document.body.appendChild(myTable).appendChild(myTr).appendChild(tdplayerName);

        var tdDOB = document.createElement("td");
        tdDOB.innerHTML = `${addPlayerList[i].DOB}`; document.body.appendChild(myTable).appendChild(myTr).appendChild(tdDOB); var tdGender = document.createElement("td"); tdGender.innerHTML = `${addPlayerList[i].Gender}`;
        document.body.appendChild(myTable).appendChild(myTr).appendChild(tdGender);

        var tdAddress = document.createElement("td");
        tdAddress.innerHTML = `${addPlayerList[i].Address}`; document.body.appendChild(myTable).appendChild(myTr).appendChild(tdAddress); var tdIDProof = document.createElement("td"); tdIDProof.innerHTML = `${addPlayerList[i].IDProof}`;
        document.body.appendChild(myTable).appendChild(myTr).appendChild(tdIDProof);

        var tdIDProofValue = document.createElement("td");
        tdIDProofValue.innerHTML = `${addPlayerList[i].IDProofValue}`; document.body.appendChild(myTable).appendChild(myTr).appendChild(tdIDProofValue); var tdmembershipFor = document.createElement("td"); tdmembershipFor.innerHTML = `${addPlayerList[i].membershipFor}`;
        document.body.appendChild(myTable).appendChild(myTr).appendChild(tdmembershipFor);

        var tdmembershipType = document.createElement("td");
        tdmembershipType.innerHTML = `${addPlayerList[i].membershipType}`; document.body.appendChild(myTable).appendChild(myTr).appendChild(tdmembershipType); var tdContact = document.createElement("td"); tdContact.innerHTML = `${addPlayerList[i].playerContact}`;
        document.body.appendChild(myTable).appendChild(myTr).appendChild(tdContact);
    }
    */
  } else {
    document.querySelector("#table-responsive").style.display = "block";
  }
}



//---------------------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 playerID = document.querySelector(".playerID").value;

  var playerGender
  if (document.getElementById('femaleplayer').checked) {
    playerGender = document.getElementById('femaleplayer').value;
  } else if (document.getElementById('maleplayer').checked) {
    playerGender = document.getElementById('maleplayer').value;
  }

   if (playerGender == undefined) {
document.querySelector(".genderlabel").innerHTML = "*Cannot be blank";

  }

  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;
}

form {
  margin: auto;
  /* nice thing of auto margin if display:flex; it center both horizontal and vertical :) */
  width: 30%;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
  height: 25%;
  margin-top: 3%;
  margin-bottom: 1.5%;
}

.login {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

label {
  font-weight: bolder;
}

.labelemailpassworderror {
  color: red;
  font-size: 10px;
  text-align: left;
}

.labelemailerror {
  color: red;
  font-size: 10px;
  text-align: center;
}

.labelpassworderror {
  color: red;
  font-size: 10px;
  text-align: center;
}

h3 {
  text-align: center;
}

h5 {
  text-align: center;
  color: green;
}

.forgotpassword {
  text-align: center;
  font-size: 10px;
  /* margin-left: 25%; */
}

.signup {
  text-align: center;
  font-size: 10px;
}

span {
  color: #1a73e8;
}

span:hover {
  color: purple;
}


/* ---------------- SETTING CSS PROPERTIES OF PROFILE PAGE---------------- */

body {
  margin-top: 0;
  font-family: "Lato", sans-serif;
}

.sidebar {
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

.sidebar a.active {
  background-color: #4CAF50;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {
    float: left;
  }
  div.content {
    margin-left: 0;
  }
}

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}

.editadminprofile {
  float: right;
}


/* ---------------- SETTING CSS PROPERTIES OF MANAGE PLAYERS PAGE---------------- */

.showplayers {
  margin-right: 30%;
  margin-top: 5%;
  margin-bottom: 2%;
  float: right;
  width: 15%;
}

.addplayers {
  margin-right: 3%;
  margin-top: 5%;
  margin-bottom: 2%;
  float: right;
  width: 15%;
}

.playeraddress {
  resize: none;
}


/* ---------------- SETTING CSS PROPERTIES OF MANAGE TRAINERS PAGE---------------- */

.showtrainers {
  margin-right: 30%;
  margin-top: 5%;
  float: right;
  width: 15%;
}

.addtrainers {
  margin-right: 3%;
  margin-top: 5%;
  float: right;
  width: 15%;
}


/* ---------------- SETTING CSS PROPERTIES OF MANAGE TOURNAMENTS PAGE---------------- */

.showtournaments {
  margin-right: 30%;
  margin-top: 5%;
  float: right;
  width: 15%;
}

.addtournaments {
  margin-right: 3%;
  margin-top: 5%;
  float: right;
  width: 15%;
}


/* ---------------- SETTING CSS PROPERTIES OF MANAGE MATCHES PAGE---------------- */

.showmatches {
  margin-right: 30%;
  margin-top: 5%;
  float: right;
  width: 15%;
}

.addmatches {
  margin-right: 3%;
  margin-top: 5%;
  float: right;
  width: 15%;
}


/* ---------------- SETTING CSS PROPERTIES OF MANAGE FEES PAGE---------------- */

.showfees {
  margin-right: 30%;
  margin-top: 5%;
  float: right;
  width: 15%;
}

.addfees {
  margin-right: 3%;
  margin-top: 5%;
  float: right;
  width: 15%;
}


/* ---------------- SETTING CSS PROPERTIES OF TABLE OF MANAGE PLAYER PAGE ---------------- */

table {
  table-layout: fixed;
}

table th,
table td {
  overflow: hidden;
}

th {
  width: 5%;
}


/*-------------- SETING CSS PROPERTIES OF CUSTOMER REGISTRATION FORM-------------*/

.customerregistration {
  margin-top: 5%;
  display: none;
  float: right;
  margin-right: 30%;
}

.customeraddress {
  resize: none;
}


/*-------------- SETING CSS PROPERTIES OF TRAINER REGISTRATION FORM-------------*/

.trainerregistration {
  margin-top: 5%;
  float: right;
  margin-right: 32%;
  display: none;
}

.traineraddress {
  resize: none;
}


/*-------------- SETING CSS PROPERTIES OF TOURNAMENT REGISTRATION FORM-------------*/

.tournamentregistration {
  display: none;
  margin-top: 5%;
  float: right;
  margin-right: 32%;
}


/*---------------SETTING CSS PROPERTIES OF MATCH REGISTRATION-----------------*/

.matchregistration {
  display: none;
  margin-top: 5%;
  float: right;
  margin-right: 35%;
}


/* -------------SETTING CSS PROPERTIES OF MANAGE FEES---------------------- */

.feesregistration {
  margin-top: 5%;
  float: right;
  margin-right: 35%;
}

<!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" required> Female
        <input type="radio" name="gender" value="male" class="playergender" id="maleplayer" required> 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>

Answer 2

bạn có thể thử một cái gì đó như thế này

var gender = document.querySelector('input[name="gender"]').checked ;
if(gender == true){
  return true;
 }else {
  return false;
 }

Answer 3

sử dụng script để kiểm tra xem đầu vào radio có được chọn hay không.

    //getting value of radio button
    let radioInput = $('input[name=gender]:checked').val();

    //checking for its value, if it is undefined nothing is selected.
    if(radioInput){
       //do something with value.
    }else{
      alert('Nothing selected');
    }