如何让我的 Javascript 识别在我的 HTML 中选择了哪个单选按钮选项？

Question

I'm working on making a small text adventure game over the next week utilising just HTML, CSS, and JavaScript, however I've ran into problems from the get go as I'm trying to have the player be given a selection of choices using radio buttons, so they select a choice, then hit submit, and based on the choice, a number of things could happen. However I have no idea how to actually achieve this function...

I've had a look for tutorials or examples featuring similar questions as mine, however none of them have helped all too much.

  <form>
    <input type="radio" name="choice" value="A1" checked> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
    <input type="radio" name="choice" value="A2"> Proin volutpat eros fringilla felis euismod laoreet a eu velit. <br>
    <input type="radio" name="choice" value="A3"> Mauris orci mi, luctus in leo eget, facilisis imperdiet lacus. <br><br>
    <button type="button" onclick=choiceA()> Choose </button>
  </form>

I'd like to be able to have the used check one of those options, then be able to hit the "Choose" button and continue on their way, having their choice logged in JavaScript for reference later.

How can I get my Javascript to recognise which radio button option is selected in my HTML?

Answer 1

You can use FormData . For that first give an identification to the form.In this example it is done with name attribute. You can also use id

Secondly use get method to get the value of selected form

 function choiceA(e) { e.preventDefault(); var form = document.forms.namedItem("fileinfo"); var formData = new FormData(form); console.log(formData.get('choice')) }

 <form name='fileinfo'> <input type="radio" name="choice" value="A1" checked> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> <input type="radio" name="choice" value="A2"> Proin volutpat eros fringilla felis euismod laoreet a eu velit. <br> <input type="radio" name="choice" value="A3"> Mauris orci mi, luctus in leo eget, facilisis imperdiet lacus. <br><br> <button type="submit" onclick=choiceA(event)> Choose </button> </form>

Answer 2

you can add them inside a div

<div id="collection">
<label>Value1
    <input name="myradio" type="radio" value="value1" />
</label>
<label>Value2
    <input name="myradio" type="radio" value="value2" />
</label>

and jquery

    $(function () {
    $('#collection input[type=radio]').change(function(){
      alert ( $(this).val() ) 
      //do your activity
      })
})

Answer 3

You can use this simple function and get your objective fullfiled. I'm taking the value from radio button whenever the user clicks on any btn, then that value is used to do operation according to the selection in choiceA();

<form>
    <input type="radio" name="choice" onclick="getRadioValue('A1')" value="A1" checked> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
    <input type="radio" name="choice" onclick="getRadioValue('A2')" value="A2"> Proin volutpat eros fringilla felis euismod laoreet a eu velit. <br>
    <input type="radio" name="choice" onclick="getRadioValue('A3')" value="A3"> Mauris orci mi, luctus in leo eget, facilisis imperdiet lacus. <br><br>
<button type="button" onclick=choiceA()> Choose </button>

In js. create a function with the same name ie. getRadioValue(param)

var globalSelectedValue = 'A1';
function getRadioValue(param){
    globalSelectedValue = param;
    console.log(globalSelectedValue);
}

function choiceA(e){
    doSomething(globalSelectedValue);
 }