Question

我正在努力在下周使用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中以供以后参考。

Answer 1

您可以将它们添加到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
      })
})

Answer 2

您可以使用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>

Answer 3

您可以使用此简单功能，使目标完整。每当用户单击任何btn时，我都会从单选按钮获取值，然后根据choiceA（）中的选择使用该值进行操作。

final class ParentViewController: UIViewController {
    var viewModel: ParentViewModel?
    private let disposeBag = DisposeBag()

    override func viewDidLoad() {
        super.viewDidLoad()
        bindViewModel()
    }

    private func bindViewModel() {
        guard let viewModel = self.viewModel else {
            fatalError("View Model not set!")
        }

        let triggerToChild = rx.someTrigger

        let input = ParentViewModel.Input(triggerToChild: triggerToChild)

        let output = viewModel.transform(input: input)

        output.triggerFromChild
            .drive(rx.someProperty)
            .disposed(by: disposeBag)
    }
}

final class ParentViewModel: ViewModelType {
    struct Input {
       let triggerToChild: Driver<Void>
    }
    struct Output {
       let triggerFromChild: Driver<Void>
    }

    func transform(input: Input) -> Output {
        let triggerFromChild = ??? <===================

        return Output(triggerFromChild: triggerFromChild)
    }
}

final class ChildViewController: UIViewController {
    var viewModel: ChildViewModel?
    private let disposeBag = DisposeBag()

    override func viewDidLoad() {
        super.viewDidLoad()
        bindViewModel()
    }

    private func bindViewModel() {
        guard let viewModel = self.viewModel else {
            fatalError("View Model not set!")
        }

        let triggerFromParent = ??? <===================

        let input = ChildViewModel.Input(triggerFromParent: triggerFromParent)

        let output = viewModel.transform(input: input)

        output.triggerFromParent
            .drive(rx.someProperty)
            .disposed(by: disposeBag)
    }
}

final class ChildViewModel: ViewModelType {
    struct Input {
        let triggerFromParent: Driver<Void>
    }
    struct Output {
        let triggerToParent: Driver<Void>
    }

    func transform(input: Input) -> Output {
        let triggerToParent = rx.someTrigger
        return Output(triggerToParent: triggerToParent)
    }
}

在js中。创建一个具有相同名称的函数，即。 getRadioValue（param）

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

如何获取我的Javascript以识别HTML中选择了哪个单选按钮选项？

3 个答案: