If else with radio not working

JavaScript
1

Hi can you help me with if else? I tried to create an alert box whenever the radio is selected. however it doesn’t work well. can you tell me please whats wrong?

Thank you!

<html>
    <head>
    <title> Example of the radio checked property</title>
    </head>
    <body>
    <script language="JavaScript">
     function checkButton(){
        if(document.form1.button1.checked == true){
            alert("Box1 is checked");
        } else if(document.form1.button2.checked == true){
            alert("Box 2 is checked");
        }
    }
    
    </script>
    <form name="form1">
    <input type="radio" name="button1" value ="check1">Box 1
    <br>
    <input type="radio" name="button1" value ="check2">Box 2
    <br>
    <input type="button" value="Get Checked" onClick='checkButton()'>
    </form>
    </body>
    </html>
2

The form element with the name="button2" does not exist (you have button1 twice), so the script breaks when doing the 2nd check (you can see the error in the console). As you probably need both radios to have the same name, you might iterate over them using the .forEach() method like so:

document.form1.button1.forEach(function (current, index) {
  if (current.checked) {
    console.log('Box ' + (index + 1) + ' is checked')
  }
})

Or since only one radio can be checked anyway, you might convert the radio list to an array and find the index of the currently checked one using .findIndex(); this way you can also easily check if any radio got checked at all:

var index = Array
  .from(document.form1.button1)
  .findIndex(function (current) {
    return current.checked
  })

if (index !== -1) {
  console.log('Box ' + (index + 1) + ' is checked')
} else {
  console.log('No box is checked')
}
1 Like
3

Do you need to test for checked? The inputs have values. eg. this works as expected.

<html>
    <head>
    <title> Example of the radio checked property</title>
    </head>
    <body>
    <script language="JavaScript">
     function checkButton(){
        if(document.form1.button1.value == 'check1'){
            alert("Box1 is checked");
        } else if(document.form1.button1.value == 'check2'){
            alert("Box 2 is checked");
        }
    }
    
    </script>
    <form name="form1">
    <input type="radio" name="button1" value ="check1">Box 1
    <br>
    <input type="radio" name="button1" value ="check2">Box 2
    <br>
    <INPUT type="button" value="Get Checked" onClick='checkButton()'>
    </form>
    </body>
    </html>

* note, also changed non-existent button2 to button1

2 Likes
4

The HTML needs a little work. It should really be using labels for the text that is associated with the radio inputs.

When that is the case you would get ID’s on your inputs. Those ID’s would then work along with .checked.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Radio Buttons - Get Selected Button</title>
<style>
form {
  padding:.5em;
  border:1px solid;
}
form, input, label {
  display:inline-block;
  margin:.25em;
}
</style>

</head>
<body>

<form name="form1" id="form1">
  <input type="radio" name="chk-button" id="button1" value ="check1">
  <label for="button1">Box 1</label>
  <br>
  <input type="radio" name="chk-button" id="button2" value ="check2">
  <label for="button2">Box 2</label>
  <br>
  <input type="button" value="Get Checked" id="getChecked">
</form>

<script>
  function checkButton(){
    const form = document.querySelector("#form1");
    const getChecked = document.querySelector("#getChecked");

    if(form.button1.checked == true){
        alert("Box 1 is checked");
    }
    else if(form.button2.checked == true){
        alert("Box 2 is checked");
    }
  }
  getChecked.addEventListener("click", checkButton);
</script>

</body>
</html>
2 Likes
5

Thanks for all your suggestions. I understand now how it works.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.