时间戳

首页 > 解决方案 > 如何让选中的复选框在警报时显示

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

问题描述

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

  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>

标签： javascripthtmlformscheckboxradio

解决方案

要显示单选按钮/复选框的值，您可以使用querySelector(. . .).value单选按钮和querySelectorAll(. . .)复选框。但是您需要先添加value属性<input />。对于每个字段，您还需要指定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>

推荐阅读