如何讓選中的復選框在警報時顯示
[英]How to get the selected checkbox to display on alert
問題描述
我一直堅持這一點。 我試着到處尋找，我找不到我的答案。 我試圖讓我的復選框和收音機顯示已選中的框，但它必須在顯示警報時顯示選定的答案。 有人可以幫我解決這個問題嗎？
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>
2 個解決方案
解決方案1
1 已采納 2020-11-18 09:17:45
要顯示單選按鈕/復選框的值，您可以將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
0 2020-11-18 08:59:17
您需要將表單中的值發送到 function。
因此，而不是尋找按鈕上的點擊，您應該等待表單提交。
然后在 onsubmit 上，將表單的值發送到 function，在這里您可以輕松地從表單中提取您需要的值。
現在，您擁有了 event 參數所需的所有數據。 event.target 為您獲取已提交給 function 的表單。 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>
如果使用JavaScript選中了復選框，如何顯示警報框？
[英]How to display alert boxes if a checkbox is checked using JavaScript?
如何使用jquery和“ ID”單擊顯示“選擇”的“警報”？
[英]How to display an “alert” for an option to “selected” with a click using jquery and “ID”?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.