[英]How can I get my Javascript to recognise which radio button option is selected in my HTML?
我正在下周仅使用 HTML、CSS 和 JavaScript 制作一个小型文本冒险游戏,但是我从一开始就遇到了问题,因为我试图让玩家有多种选择使用单选按钮,所以他们选择一个选项,然后点击提交,根据选择,可能会发生很多事情。 但是我不知道如何实际实现这个功能......
我已经寻找了与我的问题类似的教程或示例,但是它们都没有太大帮助。
<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>
我希望能够让用户选中这些选项之一,然后能够点击“选择”按钮并继续前进,让他们的选择登录 JavaScript 以供以后参考。
如何让我的 Javascript 识别在我的 HTML 中选择了哪个单选按钮选项?
您可以使用FormData
。 为此,首先给表单一个标识。在这个例子中,它是用name
属性完成的。 您也可以使用id
其次使用get
方法获取所选表单的值
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>
您可以将它们添加到 div 中
<div id="collection">
<label>Value1
<input name="myradio" type="radio" value="value1" />
</label>
<label>Value2
<input name="myradio" type="radio" value="value2" />
</label>
和jQuery
$(function () {
$('#collection input[type=radio]').change(function(){
alert ( $(this).val() )
//do your activity
})
})
您可以使用这个简单的功能来实现您的目标。 每当用户单击任何 btn 时,我都会从单选按钮中获取值,然后该值用于根据 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>
在js中。 创建一个同名的函数,即。 getRadioValue(参数)
var globalSelectedValue = 'A1';
function getRadioValue(param){
globalSelectedValue = param;
console.log(globalSelectedValue);
}
function choiceA(e){
doSomething(globalSelectedValue);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.