如何让选中的复选框在警报时显示
Posted
技术标签:
【中文标题】如何让选中的复选框在警报时显示【英文标题】: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>
【问题讨论】:
【参考方案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>
【讨论】:
以上是关于如何让选中的复选框在警报时显示的主要内容,如果未能解决你的问题,请参考以下文章