Check a Radio Button with JavaScript

Check a radio button with javascript

Do not mix CSS/JQuery syntax (# for identifier) with native JS.

Native JS solution:

document.getElementById("_1234").checked = true;

JQuery solution:

$("#_1234").prop("checked", true);

How to get value of selected radio button?

var rates = document.getElementById('rates').value;

The rates element is a div, so it won't have a value. This is probably where the undefined is coming from.

The checked property will tell you whether the element is selected:

if (document.getElementById('r1').checked) {
  rate_value = document.getElementById('r1').value;
}

Or

$("input[type='radio'][name='rate']:checked").val();

Check/uncheck radio button using javascript and html

When you click a radio button, the onClick event will always think that the radio is checked, because that is how a radio works. Instead, use a second var to keep track of open status, and then set status accordingly....

var checked = false;
function uncheck1(){
    if(checked) {
         document.getElementById("radiobtn1").checked = false;
         checked = false;
         return;
    }
    checked = true;
}
<input onclick="uncheck1()" id="radiobtn1" name="grp1" type="radio" value="prashant">prashant</input>

How to get the selected radio button’s value?

You can do something like this:

var radios = document.getElementsByName('genderS');
for (var i = 0, length = radios.length; i < length; i++) {  if (radios[i].checked) {    // do whatever you want with the checked radio    alert(radios[i].value);
    // only one radio can be logically checked, don't check the rest    break;  }}
<label for="gender">Gender: </label><input type="radio" name="genderS" value="1" checked="checked">Male</input><input type="radio" name="genderS" value="0">Female</input>

Checking Radio Button Value in Javascript

You can simply use checked property of your input to see which gender was checked while saving the player and push that value to your array

The checked property will return true or false for each radio button and will assign a value to your var playerGender - In the instance of that you have not selected any radio button the var playerGender will be undefined and then we can the error message.

I have added the working code in demo and if you do not select anything in the gender you will see this message *Cannot be blanked

Working Demo

// --------------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/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>

radio buttons won't check / uncheck

They all have different name attribute values - therefore they can only be checked (because they're not comparing to another sibling radio value). I think you might be looking for type="checkbox" instead:

<input type="checkbox" id="name" name="name"><br>
<input type="checkbox" id="age" name="age"><br>
<input type="checkbox" id="email" name="email"><br>

Radio button with different ids, different values, same name attribute

nvm, solved the issue, I was missing the checked property on my js

it went from this

var graph_selector = document.querySelector('input[name=sel_graph]').value

to this

var graph_selector = document.querySelector('input[name=sel_graph]:checked').value

Related Topics

What's the Best Way to Make a D3.Js Visualisation Layout Responsive

How to Update State.Item[1] in State Using Setstate

Change Values in Array When Doing Foreach

Fastest Way to Convert JavaScript Nodelist to Array

Accessing Private Member Variables from Prototype-Defined Functions

Make React Useeffect Hook Not Run on Initial Render

How to Make a JSONp Request from JavaScript Without Jquery

Enabling Cross-Origin Resource Sharing on Iis7

Firebase Permission Denied

Iterate Through Nested JavaScript Objects

Regex to Match All Instances Not Inside Quotes

Running JavaScript in Selenium Using Python

Firing Event on Dom Attribute Change

React Useeffect in Depth/Use of Useeffect

Determine Original Name of Variable After Its Passed to a Function

Check If a Variable Is a String in JavaScript

Multiple Modals Overlay

Google Maps: How to Create a Custom Infowindow


Leave a reply



Submit