如何让选中的复选框在警报时显示答案

【问题标题】：How to get the selected checkbox to display on alert如何让选中的复选框在警报时显示
【发布时间】：2021-03-01 12:06:34
【问题描述】：

我一直坚持这一点。我试着到处寻找，我找不到我的答案。我试图让我的复选框和收音机显示已选中的框，但它必须在显示警报时显示选定的答案。有人可以帮我解决这个问题吗？

  function popUp(){

    var firstName= document.getElementById("name").value;
    var lastName = document.getElementById("last").value;
    var age = document.getElementById("age").value;
    var male = document.getElementById("male").checked;
    var female = document.getElementById("female").checked ;
    var female = document.getElementById("female").checked ;
    var location = document.getElementById("location").checked;
    var first = document.getElementById("first").checked;
    var second = document.getElementById("second").checked;
    var res = document.getElementById("res").checked;
    var a = document.getElementById("a").checked;
    var b = document.getElementById("b").checked;

    
  return alert("First name:" + firstName + "\n" + "Last name:" + lastName + "\n" + "Age:" + age + "\n" + "Gender:" + male + female +  "\n" + "Location:" + location + first + second + "\n" + "Dietary restrictions:" + res + a + b )
   
  }

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="input.css">
    </head>

    <body>
      

<form id="new">
    <label>First name:</label>
    <input id="name" type="text">
    <br>
    <label>Last name:</label>
    <input id="last"  type="text">
    <br>
    <label>Age:</label>
    <input id="age"  type="text">
    <br>
    <label>Gender:</label>
    <input type="radio" id="male" name="Male" >
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" >
    <label for="female">Female</label>
    <br>
    <label>Location:</label>
    <input id="location" type="checkbox" >
    <label for="location">Miami</label>
    <input id="first" type="checkbox" >
    <label for="location">New York</label>
    <input id="second" type="checkbox">
    <label for="location">Houston</label>
<br>
<label>Dietary restrictions:</label>
<input id="res" type="checkbox">
    <label for="Dietary restrictions">Lactose free</label>
    <input id="a" type="checkbox" >
    <label for="Dietary restrictions">Kosher</label>
    <input id="b" type="checkbox">
    <label for="Dietary restrictions">Vegetarian</label>

<br>
    <button onclick= "popUp()" >OK</button>
</form>

<script src="input.js"></script>
    </body>
</html>

【问题讨论】：

标签： javascript html forms checkbox radio

【解决方案1】：

要显示单选按钮/复选框的值，您可以将querySelector(. . .).value 用于单选按钮，将querySelectorAll(. . .) 用于复选框。但是您需要先在<input /> 中添加value 属性。对于每个字段，您还需要指定name。

function popUp(e){
    e.preventDefault();
    var firstName= document.getElementById("name").value;
    var lastName = document.getElementById("last").value;
    var age = document.getElementById("age").value;
    var gender = document.querySelector('input[name="gender"]:checked').value;
    var location = [...document.querySelectorAll('input[name="location"]:checked')].map(e => e.value);
    var res = [...document.querySelectorAll('input[name="res"]:checked')].map(e => e.value);
    
  return alert("First name:" + firstName + "\n" + "Last name:" + lastName + "\n" + "Age:" + age + "\n" + "Gender:" + gender +  "\n" + "Location:" + location + "\n" + "Dietary restrictions:" + res )
   
  }

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="input.css">
    </head>

    <body>
      

<form id="new">
    <label>First name:</label>
    <input id="name" type="text">
    <br>
    <label>Last name:</label>
    <input id="last"  type="text">
    <br>
    <label>Age:</label>
    <input id="age"  type="text">
    <br>
    <label>Gender:</label>
    <input type="radio" value="Male" name="gender" >
    <label for="gender">Male</label>
    <input type="radio" value="Female" name="gender" >
    <label for="gender">Female</label>
    <br>
    <label>Location:</label>
    <input name="location" value="Miami" type="checkbox" >
    <label for="location">Miami</label>
    <input name="location" value="New York" type="checkbox" >
    <label for="location">New York</label>
    <input name="location" value="Houston" type="checkbox">
    <label for="location">Houston</label>
<br>
<label>Dietary restrictions:</label>
<input name="res" type="checkbox" value="Lactose free">
    <label for="Dietary restrictions">Lactose free</label>
    <input name="res" value="Kosher" type="checkbox" >
    <label for="Dietary restrictions">Kosher</label>
    <input name="res" value="Vegetarian" type="checkbox">
    <label for="Dietary restrictions">Vegetarian</label>

<br>
    <button onclick= "popUp(event)" >OK</button>
</form>

<script src="input.js"></script>
    </body>
</html>

【讨论】：

【解决方案2】：

您需要将值从表单发送到函数。

所以不要寻找按钮上的点击，你应该等待表单提交。

然后在onsubmit上，你将表单的值发送给函数，在这里你可以很容易地从表单中提取你需要的值。

现在您已经获得了事件参数所需的所有数据。 event.target 为您获取已提交给该函数的表单。 event.target.name 将为您提供名称输入。

请记住使用 event.preventDefault()。否则浏览器将发送信息并重新加载页面，因为它正在尝试提交数据。

  function popUp(event){
    event.preventDefault();
var targetForm = event.target
var firstName= targetForm.name.value;
var lastName = targetForm.last.value;
var age = targetForm.age.value;
var male = targetForm.male.checked;
var female = targetForm.female.checked ;
var location = targetForm.location.checked;
var first = targetForm.first.checked;
var second = targetForm.second.checked;
var res = targetForm.res.checked;
var a = targetForm.a.checked;
var b = targetForm.b.checked;
    
  return alert("First name:" + firstName + "\n" + "Last name:" + lastName + "\n" + "Age:" + age + "\n" + "Gender:" + male + female +  "\n" + "Location:" + location + first + second + "\n" + "Dietary restrictions:" + res + a + b )
   
  }

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="input.css">
    </head>

    <body>
      

<form id="new" onsubmit="popUp(event)">
    <label>First name:</label>
    <input id="name" type="text">
    <br>
    <label>Last name:</label>
    <input id="last"  type="text">
    <br>
    <label>Age:</label>
    <input id="age"  type="text">
    <br>
    <label>Gender:</label>
    <input type="radio" id="male" name="Male" >
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" >
    <label for="female">Female</label>
    <br>
    <label>Location:</label>
    <input id="location" type="checkbox" >
    <label for="location">Miami</label>
    <input id="first" type="checkbox" >
    <label for="location">New York</label>
    <input id="second" type="checkbox">
    <label for="location">Houston</label>
<br>
<label>Dietary restrictions:</label>
<input id="res" type="checkbox">
    <label for="Dietary restrictions">Lactose free</label>
    <input id="a" type="checkbox" >
    <label for="Dietary restrictions">Kosher</label>
    <input id="b" type="checkbox">
    <label for="Dietary restrictions">Vegetarian</label>

<br>
</form>
    <button type="submit" form="new" value="Submit">OK</button>

<script src="input.js"></script>
    </body>
</html>

【讨论】：