检查Javascript中的单选按钮值
我正在使用javascript、HTML、CSS和Bootstrap开发一个名为：网球俱乐部管理的示例项目。在这个项目中，我有一个managePlayers.html页面，其中有两个按钮添加玩家，显示玩家。单击添加玩家按钮，下面会出现一个带有输入字段的表格，其中包含ID、DOB、姓名、性别、联系人、两个单选按钮和一个保存按钮 注意：我需要做的是，当我单击保存按钮时，它应该检查是否选择了其中一个收音机（性别：男性/女性..在这种情况下）。我还没弄明白。下面是代码文件和截图 jsiddle链接： index.js检查Javascript中的单选按钮值,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,我正在使用javascript、HTML、CSS和Bootstrap开发一个名为：网球俱乐部管理的示例项目。在这个项目中，我有一个managePlayers.html页面，其中有两个按钮添加玩家，显示玩家。单击添加玩家按钮，下面会出现一个带有输入字段的表格，其中包含ID、DOB、姓名、性别、联系人、两个单选按钮和一个保存按钮 注意：我需要做的是，当我单击保存按钮时，它应该检查是否选择了其中一个收音机（性别：男性/女性..在这种情况下）。我还没弄明白。下面是代码文件和截图 jsiddle链接： i
//---------------------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;
}
<!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/popper.js@1.16.0/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>
管理球员
表演选手
添加玩家
身份证件：
出生日期：
姓名：
性别：
女性
男性
联系人：
地址:
身份证明：
---挑选---
许可证
阿达尔
护照
成员包括：
---挑选---
法庭
比赛
二者都
会员类型：
---挑选---
月刊
半年一次
每年
拯救
//---------------------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;
}
性别，，并将该值推送到您的数组
选中的属性将为每个单选按钮返回true
或false
，并将值分配给您的varplayerGender
-在实例中，您选择了未选择的任何单选按钮，varplayerGender
将被取消定义，然后我们将您可以查看错误消息
我已经在演示中添加了工作代码，如果您没有选择性别中的任何内容，您将看到此消息*不能空白
工作演示
/--------------测试登录页面登录按钮的代码单击----------------
var istableCreated=false；
var电子邮件，密码，playerIDvalue=0；
var addPlayerList=[]；
var addtournamentsList=[]；
var addTrainersList=[]；
var addMatchList=[]；
var addFeesList=[]；
//------------------------------------“管理玩家页面”----------------------------------
//--------------------------------显示管理玩家页面的玩家的测试代码--------------------------
函数showplayers（）{
document.querySelector（“#customerregistration”）.style.display=“无”；
如果（istableCreated==false）{
istableCreated=true；
var myTable=document.createElement（“表”）；
myTable.className=“表响应”；
myTable.id=“表响应”；
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=“玩家名称”；
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=“性别”；
//document.body.appendChild（myTable）.appendChild（maintr）.appendChild（THSEX）；
var thAddress=document.createElement（“th”）；
thAddress.innerHTML=“地址”；
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）.a
//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');
}