背景：
<input type="radio">，该标签表示的是单选按钮，这个类型相对于其他类型的获取，比较特殊，特此记录一下。
获取方式：
1. 使用选择器直接获取（注意选择器这种方式的使用）；
1 <html>
2 <head>
3 <title>标题示例</title>
4 <meta charset="UTF-8">
5 <style>
6 </style>
7 </head>
8 <body>
9 <form>
10 <p>Please select your preferred contact method:</p>
11 <div>
12 <input type="radio" id="contactChoice1"
13 name="contact" value="email">
14 <label for="contactChoice1">Email</label>
15
16 <input type="radio" id="contactChoice2"
17 name="contact" value="phone">
18 <label for="contactChoice2">Phone</label>
19
20 <input type="radio" id="contactChoice3"
21 name="contact" value="mail">
22 <label for="contactChoice3">Mail</label>
23 </div>
24 <div>
25 <button type="button">Submit</button>
26 </div>
27 </form>
28 <script>
29 let ele = document.querySelector(‘button‘)
30 let form = document.querySelector(‘form‘)
31 ele.addEventListener(‘click‘, function () {
32 let x = form.querySelector("input[name=‘contact‘]:checked")
33 console.log(x.value)
34 })
35 </script>
36 </body>
37 </html>
2. 使用FormData对象获取；
1 <html>
2 <head>
3 <title>标题示例</title>
4 <meta charset="UTF-8">
5 <style>
6 </style>
7 </head>
8 <body>
9 <form>
10 <p>Please select your preferred contact method:</p>
11 <div>
12 <input type="radio" id="contactChoice1"
13 name="contact" value="email">
14 <label for="contactChoice1">Email</label>
15
16 <input type="radio" id="contactChoice2"
17 name="contact" value="phone">
18 <label for="contactChoice2">Phone</label>
19
20 <input type="radio" id="contactChoice3"
21 name="contact" value="mail">
22 <label for="contactChoice3">Mail</label>
23 </div>
24 <div>
25 <button type="button">Submit</button>
26 </div>
27 </form>
28 <script>
29 let ele = document.querySelector(‘button‘)
30 let form = document.querySelector(‘form‘)
31 ele.addEventListener(‘click‘, function () {
32 var data = new FormData(form);
33 var output = "";
34 for (const entry of data) {
35 output = entry[0] + "=" + entry[1] + "\r";
36 };
37 console.log(output)
38 })
39 </script>
40 </body>
41 </html>
参考地址：
2. https://blog.csdn.net/qq_39822451/article/details/82753282
原文地址：https://www.cnblogs.com/oulae/p/11184203.html
时间： 2024-11-13 06:37:03