[英]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.