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

Question

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

  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>

Answer 1

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

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

然后在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>

Answer 2

要显示单选按钮/复选框的值，可以对单选按钮使用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>

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

How to get the selected checkbox to display on alert

html

javascript

forms

checkbox

radio