单击按钮时如何在警告框中显示选择？ （使用Javascript）

Question

我已经完成了一个带有一些选项的下拉菜单，之后我放了两个带有标签“a”和“b”的单选按钮。最后我有一个按钮......

我想问一下，我怎么能连接所有这些？

我试着像德国一样根据你的选择获胜或输球。

<select>
    <option value="England">England</option>
    <option value="Germany">Germany</option>
</select>

<form action="demo_form.asp"> 
    <label for="win">win</label>
    <input type="radio" name="gender" id="win" value="win"><br>
    <label for="lose">lose</label>
    <input type="radio" name="gender" id="lose" value="lose"><br>
</form>
<button onclick="myFunction()">click</button>

<p id="demo"></p>

Answer 1

HTML -

<select class="team">
<option value="England">England</option>
<option value="Germany">Germany</option>
</select>

<form action="demo_form.asp"> 
  <label for="win">win</label>
  <input type="radio" name="gender" id="win" value="win"><br>
  <label for="lose">lose</label>
  <input type="radio" name="gender" id="lose" value="lose"><br>
  </form>
  <button class="click">click</button>

<p id="demo"></p>

JS -

$(".click").click(function(){
    var team = $(".team").val()
    var outcome = $("#win").is(":checked") ? "wins" : "loses"
    alert(team + " " + outcome + "!")
})

检查所选下拉列表的值，检查选中哪个单选按钮，然后弹出一个显示结果的警告窗口

https://jsfiddle.net/t0uh81yL/1/

Answer 2

首先，给你选择一个ID：

<select id="country">

然后，使用此功能收集值并显示警告：

function myFunction() {
  genderIs="unselected";
  if (document.getElementById('win').checked) {
  genderIs = document.getElementById("win").value;
  }
  if (document.getElementById('lose').checked) {
  genderIs = document.getElementById("lose").value;
  }

  countryIs = document.getElementById("country").value;
  alert ("Gender: " + genderIs + "\nCountry: " + countryIs);
}

还有一件事......你的选择应该在你的表格内。它没有理由在外面。

这是fiddle，只是因为......

Answer 3

使用jQuery：

＆＃13;

＆＃13;

function myFunction() {
    var team = $('#team').val(),
        result = $('input[name=gender]:checked').val(),
        output = result 
          ? team + ' ' + result 
          : 'Select team and result!'; 
  
    alert(output);
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="team">
  <option value="England">England</option>
  <option value="Germany">Germany</option>
</select>

<form action="demo_form.asp"> 
  <label for="win">win</label>
  <input type="radio" name="gender" id="win" value="win"><br>
  <label for="lose">lose</label>
  <input type="radio" name="gender" id="lose" value="lose"><br>
</form>
<button onclick="myFunction()">click</button>
<p id="demo"></p>

＆＃13;

＆＃13;

＆＃13;